![FlatList/ SectionList
• Use pureComponent and keys to avoid memory issue
• Scroll view properties are applicable.
<FlatList data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) =>
<Text>{item.key}</Text>} key = {‘key’}/>
<SectionList renderItem={({item, index, section}) => <Text
key={index}>{item}</Text>} renderSectionHeader={({section: {title}}) => (
<Text style={{fontWeight: 'bold'}}>{title}</Text> )} sections={[ {title: 'Title1',
data: ['item1', 'item2']}, {title: 'Title2', data: ['item3', 'item4']}, {title: 'Title3',
data: ['item5', 'item6']}, ]} keyExtractor={(item, index) => item + index} />](https://image.slidesharecdn.com/3-190401061635/85/3-react-native-component-9-320.jpg)
3. react - native: component
- 2. • AppRegistry • Component • View, ScrollView • Text • TextInput • Image • FlatList/ SectionList • Modal • Platform,dimesions
- 3. AppRegistry • This API only works in projects, which are developed with create react native app. • AppRegistry is the JS entry point to running all React Native apps • App root component should be registered themselves with AppRegistry.registryComponent registerSection(appKey, component)
- 4. Component • React Native provides a number of built-in components • Basic Components - Basic UI • User Interface – User control • List Views – Flat and section list • iOS-specific – NavigationiOS, DatePickerIOS • Android-specific – DatePickerAndroid, BackHandler • Others – Webview, CameraRoll, Animated
- 5. View • View is basic component and used as container. • View is designed to be nested inside other views and can have 0 to many children of any type ScrollView • If combined height of child views is greater than parent view height then we should use scroll view.
- 6. Text • React component for displaying text. • Text supports nesting, styling, and touch handling. <Text style={{fontWeight: 'bold'}}> I am bold <Text style={{color: 'red’}} onPress={() => console.log(’hello’)} > and red </Text> </Text>
- 7. TextInput • A foundational component for inputting text into the app via a keyboard. <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} onChangeText={(text) => this.setState({text})} onSubmitEditing={() => consol.log(‘hi’)} value={this.state.text} />
- 8. Image • Bundle image: <Image source={require('./img/check.png')} /> • Network image <Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}} style={{width: 400, height: 400}} /> • Dimension is necessary for network image.
- 9. FlatList/ SectionList • Use pureComponent and keys to avoid memory issue • Scroll view properties are applicable. <FlatList data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) => <Text>{item.key}</Text>} key = {‘key’}/> <SectionList renderItem={({item, index, section}) => <Text key={index}>{item}</Text>} renderSectionHeader={({section: {title}}) => ( <Text style={{fontWeight: 'bold'}}>{title}</Text> )} sections={[ {title: 'Title1', data: ['item1', 'item2']}, {title: 'Title2', data: ['item3', 'item4']}, {title: 'Title3', data: ['item5', 'item6']}, ]} keyExtractor={(item, index) => item + index} />
- 10. Modal • The Modal component is a simple way to present content above an enclosing view. <Modal animationType="slide" transparent={false} visible={this.state.modalVisible} onRequestClose={() => { alert('Modal has been closed.'); }}> <child view> </Modal>
- 11. Platform,dimesions • We need to write some code according to platform • const height = Platform.OS === 'ios' ? 200 : 100; • const styles = StyleSheet.create({ container: { flex: 1, ...Platform.select({ ios: {height : 200}, android: {height : 100}, }), }, }); • const height = Platform.select({ ios: () => 200 android: () => 100})(); • Dimesion is used to get screen height and width: var {height, width} = Dimensions.get('window');