---
# System prepended metadata

title: How RN works

---

# 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`.


