React Native

Dev Meetings

06.04.2019

Wrocław

Łukasz

    @czystyl

https://bit.ly/2VuX1RW

CRZ GOSC

Gosc2018witamy

Questions

???

Who knows

React?

Who knows

React Native?

Who knows

• PhoneGap?
• Ionic?
• NativeScript?
• Cordova?
• Flutter?

Overview of React Native

Architecture of React Native

Basic Components

View & Text

As div & span

StyleSheet

ScrollView

FlatList

Let's code!

• npm install -g expo-cli

• Expo for iOS and Android

• expo init

• cd ${your_project_name}

• yarn start

Task

1. Create new project using Expo CLI
2. Display single note, for now it can be just text
3. Display list of notes
4. Apply styling to list

*Additional

1. Add flag indicating whether note is completed or not, display only not completed notes
2. Divide notes to sections: todo, completed

Buttons and Touchable

Buttons

Handling Inputs

Controlled  input

Task

1. Add simple form for adding new note

Device storage

Async Storage

Task

1. Save notes to AsyncStorage
2. Add possibility to edit and remove note

Images and icons

Image and Vector Icons

Task

* Additional

1. Allow user to show and hide completed notes
2. Use icons for displaying completed note indicator and for buttons
3. Handle usage of AsyncStorage completely outside components

Navigation

StackNavigation

Task

1. Add view for displaying note details

* Additional

1. Add separate view for creating new note/editing existing one
2. Add possibility to set planned date for note
3. Make date selecting working properly on both iOS and Android

Location

Using MapView

Using Markers

Task

1. Add automatic save of current location when creating a new note
2. Display MapView with note location in details view

* Additional

1. Allow user to select location when creating/editing note