# How RN works ![](https://i.imgur.com/PIk7BiR.png) ![](https://i.imgur.com/UKOnUJk.png) ------------------- # Basic Components * View * Text * Image * TextInput * ScrollView * StyleSheet * Button * Picker * Slider * Switch * FlatList * SectionList * ActivityIndicator * Alert * Modal * Dimensions * StatusBar * KeyboardAvoidingView ---------------------- # Difference between **View** and **Text** containers https://facebook.github.io/react-native/docs/text#containers The <Text> element is unique relative to layout: **everything inside is no longer using the flexbox layout but using text layout**. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line. ```jsx= <Text> <Text>First part and </Text> <Text>second part</Text> </Text> // Text container: the text will be inline if the space allowed it // |First part and second part| // otherwise, the text will flow as if it was one // |First part | // |and second | // |part | <View> <Text>First part and </Text> <Text>second part</Text> </View> // View container: each text is its own block // |First part and| // |second part | // otherwise, the text will flow in its own block // |First part | // |and | // |second part| ``` --------------------------- `and red` text will inherit the `fontWeight` from his parent `Text` ```jsx= <Text style={{fontWeight: 'bold'}}> I am bold <Text style={{color: 'red'}}>and red</Text> </Text> ``` while this one won't inherit the `fontWeight` from his parent `View` ```jsx= <View style={{fontWeight: 'bold'}}> <Text style={{color: 'red'}}>not bold but red</Text> </View> ``` https://facebook.github.io/react-native/docs/text-style-props # REACT NATIVE SHADOW --------------------- # [TextInput](https://facebook.github.io/react-native/docs/textinput) - Difference between [onChange](https://facebook.github.io/react-native/docs/textinput#onchange) and [onChangeText](https://facebook.github.io/react-native/docs/textinput#onchangetext) - Other props like `value`, `maxLength` `keyboardType`, `placeholder`, `secureTextEntry`, `autoFocus`, `editable`... -------------------- # [ActivityIndicator](https://facebook.github.io/react-native/docs/activityindicator) - props: `size`: enum('small', 'large'), number(android only), `color` -------------------- # Images/ ImageBackground -talk about different ways of importing images and its own props like resizeMode, onLoad/End/Start and the difference between them, point out that the source object can take the {uri, width, height} of the image or you can use the style sheet to adjust the dimension - **Note that for network and data images, you will need to manually specify the dimensions of your image!** - https://facebook.github.io/react-native/docs/image - https://facebook.github.io/react-native/docs/imagebackground - [Exercise:React Native Full Screen Background Image ](https://aboutreact.com/react-native-full-screen-background-image/) ----------------------- # Buttons and touch events **NOTE**: we can't add onClick on views so we have to use buttons or touchables - [**Button:**](https://facebook.github.io/react-native/docs/button) (native platform button) A basic button component that should render nicely on any platform. Supports a minimal level of customization. (title prop required for the btn to appear) - **custom buttons** with **Touchable** handlers those are wrappers for making views respond properly to touches -- [TouchableOpacity](https://facebook.github.io/react-native/docs/touchableopacity)(contains style prop) -- [TouchableHighlight](https://facebook.github.io/react-native/docs/touchablehighlight)(contains style prop) -- [TouchableNativeFeedback](https://facebook.github.io/react-native/docs/touchablenativefeedback) (Android only) -- [TouchableWithoutFeedback](https://facebook.github.io/react-native/docs/touchablewithoutfeedback) (not recommended, doesn't provide the user with a visual feedback whenever it is clicked) - also `Text` component has onPress ------------------------ ## [Types of react navigation navigators](https://reactnavigation.org/docs/en/status-bar.html): 1. StackNavigation 2. [DrawerNavigation](https://reactnavigation.org/docs/en/drawer-based-navigation.html) 3. [TabNavigation](https://reactnavigation.org/docs/en/tab-based-navigation.html) - [Great talk](https://www.youtube.com/watch?v=wJJZ9Od8MjM) - https://reactnavigation.org/docs/en/getting-started.html - https://medium.com/building-with-react-native/routing-in-react-native-apps-and-how-to-configure-your-project-with-react-navigation-library-d8d58005bfe9 - https://www.javatpoint.com/react-native-navigation [deep linking](https://reactnavigation.org/docs/en/deep-linking.html) [Different status bar configuration based on route](https://reactnavigation.org/docs/en/status-bar.html) [Replacing the title with a custom component](https://reactnavigation.org/docs/en/headers.html#replacing-the-title-with-a-custom-component) [Header interaction with its screen component](https://reactnavigation.org/docs/en/header-buttons.html#header-interaction-with-its-screen-component) **StackNavigator** - The only required configuration for a route is the screen component. You can read more about the other options available in the [StackNavigator reference](https://reactnavigation.org/docs/en/stack-navigator.html). - The *keys* in the route configuration object are the *route names* and the *values* are the *configuration* for that route - To specify what the initial route in a stack is, provide an initialRouteName on the stack options object. - Each time you call *push* we add a new route to the navigation stack. When you call *navigate* it first tries to find an existing route with that name, and only pushes a new route if there isn't yet one on the stack. - The navigationOptions static property can be an object or a function. When it is a function, it is provided with an object with the navigation prop, screenProps, and navigationOptions on it - You can set buttons in the header through the headerLeft and headerRight properties in navigationOptions. - The back button is fully customizable with `headerLef`t, but if you just want to change the title or image, there are other **navigationOptions** for that — `headerBackTitle`, `headerTruncatedBackTitle`, and `headerBackImage`.