├── LICENSE ├── README.md ├── days ├── 01.md ├── 02.md ├── 03.md ├── 04.md ├── 05.md ├── 06.md ├── 07.md ├── 08.md ├── 09.md ├── 10.md ├── 11.md ├── 12.md ├── 13.md ├── 14.md ├── 15.md ├── 16.md ├── 18.md ├── 20.md ├── 22.md └── 23.md ├── format.md └── images ├── Images.png ├── alert-screenshot.png ├── drawer-stack-navigation.png ├── game-zone-1.png ├── game-zone-2.png ├── game-zone-3.png ├── gifs ├── onboarding-with-welcome-screen.gif ├── opacity-animation.mp4 ├── react-native-fashion-02.gif ├── react-native-opacity-animation.gif ├── react-native-swipe.gif └── unsplash-onboarding.gif ├── keyboard-management-1.png ├── keyboard-management-2.png ├── screenshot--day-2.png ├── screenshot-1.png └── something-went-wrong.png /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Victor Ofoegbu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | I had a quick glance at React Native in 2018. A lot about mobile has changed, especially in react-native. I've decided to explore cross-platform mobile development with React Native and possibly Flutter. 2 | 3 | My reasons are to get a feel of mobile development, understand trends, how people use mobile and gain more knowledge on non-web environments. 4 | 5 | I'm beginning with a 30-days-of-react-native for the month of September. My goal for this month is to build a simple, open-source alarm clock in React Native. 6 | 7 | ## Rules 8 | 9 | - Show up for at least 2 hours everyday 10 | - Document everyday's activities in this format 11 | 1. Time spent 12 | 2. Summary of yesterday 13 | 3. Learnings 14 | 4. Challenges 15 | 5. Tomorrow's focus 16 | 17 | **Update (6/10/20)**: It's been incredibly difficult to commit to the this daily exercise (given my day job and other activities). My goal with this exercise was to absorb a lot of knowledge in the smallest time possible. Things got shaky after the first 20 days, while I wasn't pleased that, I'm totally grateful for what I've learned in this very short time. I'm currently working on the [alarm clock](https://github.com/vickOnRails/wakie) as part of my goal for this exercise. 18 | 19 | ## Le'go 🚀🚀🚀 20 | 21 | - [x] [Day 1](https://github.com/vickOnRails/react-native-30/blob/master/days/01.md) 22 | - [x] [Day 2](https://github.com/vickOnRails/react-native-30/blob/master/days/02.md) 23 | - [x] [Day 3](https://github.com/vickOnRails/react-native-30/blob/master/days/03.md) 24 | - [x] [Day 4](https://github.com/vickOnRails/react-native-30/blob/master/days/04.md) 25 | - [x] [Day 5](https://github.com/vickOnRails/react-native-30/blob/master/days/05.md) 26 | - [x] [Day 6](https://github.com/vickOnRails/react-native-30/blob/master/days/06.md) 27 | - [x] [Day 7](https://github.com/vickOnRails/react-native-30/blob/master/days/07.md) 28 | - [x] [Day 8](https://github.com/vickOnRails/react-native-30/blob/master/days/08.md) 29 | - [x] [Day 9](https://github.com/vickOnRails/react-native-30/blob/master/days/09.md) 30 | - [x] [Day 10](https://github.com/vickOnRails/react-native-30/blob/master/days/10.md) 31 | - [x] [Day 11](https://github.com/vickOnRails/react-native-30/blob/master/days/11.md) 32 | - [x] [Day 12](https://github.com/vickOnRails/react-native-30/blob/master/days/12.md) 33 | - [x] [Day 13](https://github.com/vickOnRails/react-native-30/blob/master/days/13.md) 34 | - [x] [Day 14](https://github.com/vickOnRails/react-native-30/blob/master/days/14.md) 35 | - [x] [Day 15](https://github.com/vickOnRails/react-native-30/blob/master/days/15.md) 36 | - [x] [Day 16](https://github.com/vickOnRails/react-native-30/blob/master/days/16.md) 37 | - [ ] Day 17 38 | - [x] [Day 18](https://github.com/vickOnRails/react-native-30/blob/master/days/18.md) 39 | - [ ] Day 19 40 | - [x] [Day 20](https://github.com/vickOnRails/react-native-30/blob/master/days/20.md) 41 | - [ ] Day 21 42 | - [x] [Day 22](https://github.com/vickOnRails/react-native-30/blob/master/days/22.md) 43 | - [ ] Day 22 44 | - [ ] Day 23 45 | - [ ] Day 24 46 | - [ ] Day 25 47 | - [ ] Day 26 48 | - [ ] Day 27 49 | - [ ] Day 28 50 | - [ ] Day 29 51 | - [ ] Day 30 52 | -------------------------------------------------------------------------------- /days/01.md: -------------------------------------------------------------------------------- 1 | # Day 01 2 | 3 | **Date**: 7th Sept, 2020 4 | **Time spent**: 4 5 | 6 | ## Summary of yesterday 7 | 8 | Nothing 9 | 10 | ## Learnings 11 | 12 | - There are 2 ways to create a react native app 13 | 14 | - **Expo CLI**: Expo provides us a wrapper for compiling and previewing our app without necessarily setting up Android Studio or XCode. It's great to start with, but you'll have to eject to access more advanced react native features. 15 | 16 | - **React Native CLI**: Full setup for working with react native. Requires installing Android Studio or XCode. 17 | 18 | 19 | 20 | ![Image of my setup](../images/screenshot-1.png) 21 | 22 | ### Styling React Native 23 | 24 | - React Native gives us a css-like way to style our components. If you've used css modules, things should look very familiar. Except with the following differences 25 | 26 | - Property names are camelCase in react native. 27 | - Component styles are separated by commas. 28 | - We create styles with `StyleSheet.create({})` inside the component file. 29 | - Styles are scoped to components by default. 30 | - Styling does not cascade and there is no inheritance except for `` inside of `` components. 31 | 32 | - React Native `Views` aren't scroll by default. We need to use the `` react native component for views that are scrollable. 33 | - **Lists in React Native**: React native lists are rendered in many ways 34 | 35 | - : Flatlists render items lazily 36 | - : Scrollview renders all the children elements at once. 37 | - : Used for rendering sectioned lists items 38 | 39 | ```js 40 | {item.name}} 43 | /> 44 | ``` 45 | 46 | - The `FlatList` component can be passed in a few other props like 47 | - **numColumns**: Arranges the items in number of columns specified 48 | - **keyExtractor**: Specifies the property to use as the key for all top level list items. The default is the `key` prop. 49 | 50 | ```js 51 | item.useThisAsKey} 53 | numColumns={2} 54 | data={people} 55 | renderItem={({ item }) => {item.name}} 56 | /> 57 | ``` 58 | 59 | Good stuff, anyways 60 | 61 | ## Challenges 62 | 63 | - **Enable VT-x in your BIOS security settings**: 64 | 65 | - I spent a few minutes learning about BIOS settings. BIOS controls communication between system devices. In this case, it was preventing Android studio from launching. Learn more [here](https://www.lifewire.com/bios-basic-input-output-system-2625820). 66 | - **fix**: I fixed this error by enabling virtualization on my PC. This is device specific, but here's a [few](https://stackoverflow.com/questions/39542853/enable-vt-x-in-your-bios-security-settings-refer-to-documentation-for-your-comp) [helpful](https://stackoverflow.com/questions/42471855/android-studio-enable-vt-x-in-your-bios-setting) [resources](https://stackoverflow.com/questions/40342015/enable-vt-x-in-your-bios-security-settings-ensure-that-your-linux-distro-has-wo). 67 | 68 | ## Tomorrow's focus 69 | 70 | - Flexbox for react native 71 | - Custom fonts 72 | - React navigation 73 | -------------------------------------------------------------------------------- /days/02.md: -------------------------------------------------------------------------------- 1 | # Day 02 2 | 3 | **Date**: 18th Sept, 2020 4 | **Time spent**: 3hours 5 | 6 | ## Summary of yesterday 7 | 8 | - Started a react native tutorial 9 | - Setup my environment (Android studio, etc) and built my first app with Expo-cli 10 | - Explored lists (``, `` & ``) in React Native 11 | - Fixed VT-x settings preventing Android studio from running on my machine 12 | 13 | ## Learnings 14 | 15 | ### 1. Alerts: 16 | 17 | Alerts in React Native are very different from alerts on the web. We create alerts by importing the `Alert` component from `react-native` 18 | 19 | ```js 20 | import { Alert } from "react-native"; 21 | 22 | // usage 23 | Alert.alert( 24 | "Alert Title", 25 | "Description of Alert", 26 | // Actions or CTAs 27 | [ 28 | { 29 | text: "Understood", 30 | onPress: () => console.log("Alert Closed"), 31 | }, 32 | ] 33 | ); 34 | ``` 35 | 36 | And here's what the result looks like 37 | 38 | ![Alert screenshot](./../images/alert-screenshot.png) 39 | 40 | ### 2. Dismissing the keyboard 41 | 42 | - Mobile keyboards can be funny. We would normally need to use the back button to close our keyboards but this can be inconveniencing at times. We want a situation where we can dismiss the keyboard by touching anywhere on the screen. 43 | - The way we do this is by wrapping our whole app in a `TouchableWithoutFeedback` component and run `Keyboard.dismiss()` on press. An example would look like this 44 | 45 |
46 | 47 | ```js 48 | import { TouchableWithoutFeedback, Keyboard } from "react-native"; 49 | 50 | const App = () => ( 51 | 52 | ...rest of the app 53 | 54 | ); 55 | ``` 56 | 57 | I don't know how much of a good practice this is, but it solves the problem at the moment. 58 | 59 | ### 3. Flexbox in RN 60 | 61 | ![Issues 32eth Issues to a](../images/screenshot--day-2.png) 62 | 63 | - All items in RN are flex items and take up the whole horizontal space by default 64 | - Elements by default have a collapsed height. But adding giving them the property of `flex: 1` makes them span the available vertical space 65 | - The `flexDirection` property positions items opposite from the way the web does. The default `flex` value is `row` on the web and `column` on RN. I really don't understand why, but lets just hope it gets easier to wrap my head around. 66 | - `column` value positions elements as horizontal on RN but does so vertically on the web 67 | 68 | [Graphic explaining what I mean] 69 | 70 | ### React Native Icon 71 | 72 | - Using expo to bootstrap our app gives us access to `@expo/vector-icons` which contains virtually any icon we can think of. We make use of them as follows 73 | 74 | ```js 75 | import { MaterialIcons } from "@expo/vector-icons"; 76 | 77 | const App () => { 78 | return ( 79 | 80 | ) 81 | } 82 | 83 | ``` 84 | 85 | > PS. I rounded up my first react native app for this course using expo 86 | 87 | ### Adding Custom Fonts to a RN Project 88 | 89 | - We use fonts in RN by including the font files in our app and requiring them. Here is an example of how to use custom fonts in RN 90 | 91 | ```js 92 | import React, { useState } from "react"; 93 | import * as Font from "expo-font"; 94 | import { AppLoading, Text } from "expo"; 95 | 96 | const getFonts = () => 97 | Font.loadAsync({ 98 | "nunito-regular": require("./assets/fonts/Nunito-Regular.ttf"), 99 | "nunito-bold": require("./assets/fonts/Nunito-Bold.ttf"), 100 | }); 101 | 102 | const App = () => { 103 | const [fontsLoaded, setFontsLoaded] = useState(false); 104 | 105 | if (fontsLoaded) { 106 | return ; 107 | } else { 108 | setFontsLoaded(true)} 110 | startAsync={getFonts} 111 | />; 112 | } 113 | }; 114 | ``` 115 | 116 | In another component 117 |
118 | 119 | ```js 120 | import React from "react"; 121 | import { Text, StyleSheet } from "react-native"; 122 | 123 | const SomeComponent = () => { 124 | return Random Text; 125 | }; 126 | 127 | const styles = StyleSheet.create({ 128 | text: { 129 | fontFamily: "nunito-bold", 130 | }, 131 | }); 132 | ``` 133 | 134 | ### Global Styles 135 | 136 | - We can add global styles that can be used anywhere in our app. This isn't different from the normal way of defining stylesheets, it's just more modular. Here's an example 137 | 138 | ```js 139 | // globalStyles.js 140 | 141 | import { StyleSheet } from "react-native"; 142 | 143 | export const globalStyles = StyleSheet.create({ 144 | container: { 145 | flex: 1, 146 | padding: 24, 147 | }, 148 | titleText: { 149 | fontFamily: "nunito-bold", 150 | fontSize: 18, 151 | color: "#333", 152 | }, 153 | paragraph: { 154 | marginVertical: 20, 155 | lineHeight: 20, 156 | }, 157 | }); 158 | ``` 159 | 160 | We can use it anywhere in our app 161 | 162 | ```js 163 | // home.js 164 | 165 | import React from "react"; 166 | import { Text, View } from "react-native"; 167 | import { globalStyles } from "../styles/global"; 168 | export default function Home() { 169 | return ( 170 | 171 | Home Screen 172 | 173 | ); 174 | } 175 | ``` 176 | 177 | ### Navigation in RN 178 | 179 | - Install the following to get `react-navigation` to work (using yarn) 180 | 181 | ```bash 182 | yarn add @react-navigation/native 183 | ``` 184 | 185 | Also add the following if you're using expo 186 | 187 | ```bash 188 | expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view 189 | ``` 190 | 191 | The easiest way to get started is with the stack navigator. To use, install the stack navigator library 192 | 193 | ```bash 194 | yarn add @react-navigation/stack 195 | ``` 196 | 197 | Then we can use like so 198 | 199 | ```js 200 | // App.js 201 | import React, { useState } from "react"; 202 | import { StyleSheet, Text, View } from "react-native"; 203 | import { NavigationContainer } from "@react-navigation/native"; 204 | import { createStackNavigator } from "@react-navigation/stack"; 205 | 206 | import Home from "./screens/home"; 207 | 208 | const { Navigator, Screen } = createStackNavigator(); 209 | 210 | const App = () => { 211 | return ( 212 | 213 | 214 | 215 | 216 | 217 | 218 | ); 219 | }; 220 | ``` 221 | 222 | ### Navigating between screens 223 | 224 | - Each child of the `` is passed a `navigation` props. It enables declarative routing in RN apps. We can use it like so. 225 | 226 |
227 | 228 | ```js 229 | const App = ({ navigation }) => { 230 | const pressHandler = () => { 231 | // move to the specified page 232 | navigation.navigate("ReviewDetails"); 233 | 234 | // move to your village 235 | navigation.goBack(); 236 | }; 237 | 238 | return