samnoh / rn-api-demo

React Native API Demo

TIL

react-native-dotenv

• Import env variables from .env file in React Native

npm install --save-dev react-native-dotenv

• .bablerc

{
    "presets": ["babel-preset-expo", "module:react-native-dotenv"]
}

• .env

SECRET_KEY=VALUE

• Usage

import { SECRET_KEY } from 'react-native-dotenv';

Expo Icons

• List

import { AntDesign } from '@expo/vector-icons';
...
return <AntDesign name="check" size={30} />;

TextInput

• onEndEditing

<TextInput onEndEditing={() => {}} />

FlatList

• Re-render FlatList

<FlatList key={data.length} /> // Functional or Pure components
<FlatList extraData={data} /> // Class components

Navigation

• Parameters

navigation.navigate('exampleScreen', { id: data.id }); // set

const id = navigation.getParam('id'); // get

• Styling

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);

SafeAreaView

• Render content within the safe area boundaries of a device (only iOS devices)

<SafeAreaView>...</SafeAreaView>

ScrollView

• contentContainerStyle

<ScrollView contentContainerStyle={styles.contentContainer}>...</ScrollView>

StatusBar

• backgroundColor
• barStyle
  • light-content
  • dark-content

import { StatusBar } from 'react-native';
...
<StatusBar barStyle="light-content" />;