A collection of JavaScript files created during my journey to learn React Native.
https://facebook.github.io/react-native/docs/getting-started
01 Hello World
Render
Component
JSX
02.1 Props (pt. 1)
Sources are props for controlling the way images look
02.2 Props (pt.2) Style and custom props
JavaScript Syntax
Component Hierarchy
Props and Custom props
03 States
States
Constructors
04 Style
In an array, the last style will ALWAYS take precedence over others.
05.1 Size
The size of each View component can be explicitly styled
Fixed dimensions are ideal for components set to render at the exact same size regardless of the size of the screen
Flex defines the height of a component. It is a ratio compared to other components on screen.
Removing the parent flex prevents the child components from rendering since it won't have any dimensions
Changing the parent height causes child components to render inside an area defined by the size of the parent
05.2 Flexbox
Flexbox is designed to display consistent layouts on different sized screens
06.1 FlexDirection
flexDirection determines the primary axis of a layout
FlexDirections organize child components vertically (column) by default. Row organizes them horizontally.
06.2 Justify Content
justifyContent determines the way children components are distributed along the primary axis of the parent component
Options include flex-start, center, flex-end, space-around, space-between and space-evenly.
06.3 Align Items
alignItems determines the alignment of children along the secondary axis
If primary is row, secondary is column and vice versa
Options: flex-start, center, flex-end, and stretch.
components only stretch when they don't have fixed dimensions on the secondary axis
07.1 Input Text
TextInput is a component which allows users to enter text
onChangeText is a prop called every time the text is changed
08.1 Buttons
Button component has an onPress prop for defining actions performed when pressed
The title prop is the text displayed inside the button
08.2 Touches
TouchableHighlight is ideal wherever links/buttons would go. The background darkens when touched
TouchableNativeFeedback displays an ink surface with ripples when touched
TouchableOpacity reduces the opacity of the button showing the background to be seen through while pressed down
TouchableWithoutFeedback is a super basic button which doesn't react when touched
09 ScrollViews
ScrollViews are generic scrolling containers which can host multiple components/views
Able to scroll horizontal by setting the horizontal property
Best for displaying a small amount of things of a limited size
FlatList component is better for a longer list
10.1 FlatLists
FlatList component displays a scrolling list of changing and similarly structured data
Good for long lists where the quantity of items might change
Only renders what is on screen while ScrollView renders everything at once
Props include data and renderItem.
data is the source of info for the list
renderItem takes an item from the source and returns a formatted component to render
The FlatListBasics component then renders the FlatList and all Text components.
10.2 SectionLists
SectionLists break up information into lists in different sections
This program shows names sorted under different letters, like the list of contacts.
11 Networking
Fetching allows an app to load resources from a remote URL