callstack/react-native-ios-kit

The missing React Native UI Kit for iOS

react-native-ios-kit's Issues

Recommend Placing Inside ApolloProvider?

When there are other providers, does it matter in which order they're placed? Here's the direction I went with my expo app, but I thought others might have this question as well, so maybe the docs should mention this point 🤔

    <ApolloProvider client={client}>
      {
        <ThemeProvider>
          <View style={styles.container}>
            {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
            {Platform.OS === 'android' && <View style={styles.statusBarUnderlay} />}
            <RootNavigation />
          </View>
        </ThemeProvider>
      }
    </ApolloProvider>

TextField

https://developer.apple.com/ios/human-interface-guidelines/controls/text-fields/

GroupedList not taking available space

List is not taking whole available space of parent container. We need to give it flexGrow: 1 style.

Toolbar

https://developer.apple.com/ios/human-interface-guidelines/bars/toolbars/

Whats the difference between toolbar and tabbar?

Crashes on launch

App crashes when importing form react-native-ios-kit.

Error shown

error: bundling failed: Error: Unable to resolve module `NativeModules` from `/Users/kyleroach/Desktop/USCChannel/node_modules/react-native-ios-kit/src/components/GroupedList/Sections.js`: Module does not exist in the module map

Steps to reproduce

• Import any component from the library
• Place in render method

Environment

IOS simulator - IOS 11.2 iPhone 6
React Native 0.53.0

setup repository

Copy base code from old repo
use expo

Page controls

https://developer.apple.com/ios/human-interface-guidelines/controls/page-controls/

RadioButton Row

or Checkbox. We need to find out the best name for this component

GrouppedList

Possibility to use custom icon in Icon component

TextField - default height

why TextField component has flexGrow: 1 by default? I would say, it should have a static height by default and you can overwrite this using custom style.

example:

<Container style={{ flex: 1 }}> // this is whole screen container
   <TextField value="test" />
   <Button onPress={() => {}}>Press me</Button>
</Container>

my assumption is:

------------------
   Input
   Button 



-------------------

but currently it renders:

-------------------


 INPUT


 Button
-------------------

any thoughts?

Customize font

Hello. On the docs is mentioned you can customize the font with a theme passed to ThemeProvider, yet the theme type has no property for such value.

Is this a missing feature or I am missing something?

Thanks

Documentation

Stepper

❤️

GroupedList

grouped list of items with this funny alphabet on the right

TabBar

https://developer.apple.com/ios/human-interface-guidelines/bars/tab-bars/

Grid

TabBar should work properly on iPhone X

Button

Collection

https://developer.apple.com/ios/human-interface-guidelines/views/collections/

Modal

Will be hard to implement

https://developer.apple.com/ios/human-interface-guidelines/app-architecture/modality/

Update Expo SDK to at least v31.0.0

Environment

Iphone 7 iOS 12

Description

When opening app on iOS through QR code, expo app throws error.
"There was a problem loading the requested app."

Swipeable list items

Describe the feature

List with Swipeable items

List with Draggable Items

Describe the feature

List with Draggable Items

Icon component

default with IOS specific icons

TableView

Typography

Form component

Describe the feature

Currently, we have a List component with List Items. Rename them to Form with child elements (Replace TableView and Rows):
- Form.Item (basic)
- Form.Separator (gray divider)
- others:

As a followup, investigate option to create more controlled components, maybe with validation and such. (Formik-like?)

Documentation

Slider

ToggleButton

Option to have title in RowItem truncated (possible bug)

Describe the feature

This might be a bug. But the "title" of `RowItem" is wrapping:

Motivation

I don't think titles generally go to 2nd line in iOS.

Related Issues

NavigationRow

We can think about better name

Possibility to add some text near right arrow

TextFieldRow

SwitchRow

Avatar

CheckboxRow

See Languages in ios settings

Name to be changed!

<TextInput/> underlineColorAndroid = 'transparent' doesn't work

TextField and SearchBar components doesn't display correctly, underlineColorAndroid props its not working as it should.

Searchbar

without move top animation

Update dependencies

react 16 etc.

refactor theme object structure

something like:

{
  primaryColor: string,
  secondaryColor: string,
  ...
}

Toolbar -- componentWillReceiveProps is deprecated

Environment

Running Toolbar on an emulation Android device.

Description

Getting this warning:

Warning: componentWillReceiveProps is deprecated and will be removed in the next major version. Use static getDerivedStateFromProps instead.
│
│ Please update the following components: ThemeProvider, withTheme(Icon), withTheme(StyledText), withTheme(Toolbar)
│
│ Learn more about this warning here:
└ https://fb.me/react-async-component-lifecycle-hooks

Reproducible Demo

import { ThemeProvider, Toolbar } from 'react-native-ios-kit';

TextFieldRow doesn't scroll properly

This is especially a problem when trying to select text.

Segmented Controls

https://developer.apple.com/ios/human-interface-guidelines/controls/segmented-controls/

Popover

https://developer.apple.com/ios/human-interface-guidelines/views/popovers/

For iPad mostly

InfoRow

GroupedList - missing key extractor

VirtualizedList used by GroupedList needs to have some key extractor.

SliderRow

Theme provider

RowItem, NavigationRow and more... backgroundColor onClick

When creating RowItem, NavigationItem and other fields and clicking on them, there is no change of background Color as it is done in iOS itself.
Tell me, this part is not implemented or I do something wrong?
<TableView withoutHeader={true} withoutFooter={true}>
<NavigationRow
title="Имя"
info={this.props.user['first_name']}
onPress={() => this.props.navigation.navigate('editUserProfile', this.state.editProps.name)} />
</TableView>
This is my code