jorneycr / crudnative-mobile

React Native with React Natigator

This is a new React Native project, bootstrapped using @react-native-community/cli.

Getting Started

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

npx react-native@latest init crudnative

# using npm
npm start

## Step 2: Start your Application

Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:

### For Android

```bash
# using npm
npm run android

# OR using Yarn
yarn android

React navigator

Dependecies

# You must install all of them to make it works
npm i @react-navigation/native

npm install react-native-screens react-native-safe-area-context

npm install @react-navigation/native-stack


# Then Rebuild your app
npx react-native run-android

Configuration for android

# In android\app\src\main\java\com\reactnatigation\MainActivity.kt

import android.os.Bundle;


# inside of the MainActivity: ReactActivity() { .... }, add at the end the next code

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
}

Set up React navigator

# In App.jsx

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

import Home from './src/views/Home';
import About from './src/views/About';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="About" component={About} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Oficial Documentation

https://reactnavigation.org/docs/hello-react-navigation

Icons

Dependencies

npm install react-native-vector-icons

Set Up Android

# In android\app\build.gradle

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

https://oblador.github.io/react-native-vector-icons/

Set up Fake API in 30 seg

Dependencies

npm install -g json-server

Create a file in the projet's root

db.json

Run Fake API

Check your local IP for Android on Windows in cmd ipconfig

json-server db.json -H 192.168.20.62

End-Points

Home

Get Clientes

Post Clientes