- Import env variables from
.env
file in React Native
npm install --save-dev react-native-dotenv
{
"presets": ["babel-preset-expo", "module:react-native-dotenv"]
}
import { SECRET_KEY } from 'react-native-dotenv';
import { AntDesign } from '@expo/vector-icons';
...
return <AntDesign name="check" size={30} />;
<TextInput onEndEditing={() => {}} />
<FlatList key={data.length} /> // Functional or Pure components
<FlatList extraData={data} /> // Class components
navigation.navigate('exampleScreen', { id: data.id }); // set
const id = navigation.getParam('id'); // get
exampleComponent.navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('name'),
headerStyle: { backgroundColor: 'blue' },
headerBackTitle: 'Back',
headerBackTitleStyle: { color: 'white' },
headerTintColor: 'white' // '<' Chevron Left Icon
};
};
withNavigation
-> directly pass down navigation
in props
import { withNavigation } from 'react-navigation';
...
export default withNavigation(exampleComponent);
- Render content within the safe area boundaries of a device (only iOS devices)
<SafeAreaView>...</SafeAreaView>
<ScrollView contentContainerStyle={styles.contentContainer}>...</ScrollView>
backgroundColor
barStyle
- light-content
- dark-content
import { StatusBar } from 'react-native';
...
<StatusBar barStyle="light-content" />;