Easy Steps: February 2019

Wednesday, February 27, 2019

React Navigation 5.x||4.x || 3.x || Example of createDrawerNavigator

React Navigation 5.x || Drawer Navigation

Installation

Install the required packages in your React Native project

yarn add @react-navigation/drawer

Example : #5.1 [ Basic Setup]

import React from 'react'

import { Text, View, Button } from 'react-native'

import { NavigationContainer } from '@react-navigation/native'

import { createDrawerNavigator } from '@react-navigation/drawer'

const Home = ({ navigation }) => {

return (

<Button title='Go to Profie' onPress={() => navigation.navigate('profiles')}></Button>

</>

)

}

const Profile = () => {

return (

<Text> Profile</Text>

</>

)

}

const Drawer = createDrawerNavigator()

const RootRoute = () => {

return (

<Drawer.Navigator>

<Drawer.Screen name='Home' component={Home} />

<Drawer.Screen name='Profile' component={Profile} />

</Drawer.Navigator>

)

}

const App = () => {

return (

</NavigationContainer>

</>

)

}

export default App

Happy coding :)

Example : #5.2 [ Stack + Tab + Drawer]

import * as React from 'react';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { createDrawerNavigator } from '@react-navigation/drawer'

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

import { createStackNavigator } from '@react-navigation/stack'

import { View, Text } from 'react-native'

import Icon from 'react-native-vector-icons/Ionicons'

const Home = () => <><Text>Home</Text></>

const SettingStack = () => <><Text>Settings</Text></>

const NotificationStack = () => <Text>notification</Text>

const Stack = createStackNavigator()

const HomeStack = ({navigation}) => {

return (

<Stack.Navigator

screenOptions={{

headerLeft: ({})=><Icon name ='md-menu' size={22} onPress={()=>navigation.openDrawer()}/>

}}

<Stack.Screen name='Home' component={Home} />

</Stack.Navigator>

)

}

const Tab = createBottomTabNavigator()

const TabNavigator = () => {

return (

<Tab.Navigator>

<Tab.Screen name="Home" component={HomeStack} />

<Tab.Screen name="Announcement" component={NotificationStack} />

<Tab.Screen name="Settings" component={SettingStack} />

</Tab.Navigator>

);

}

const Drawer = createDrawerNavigator();

const AppDrawer = () => {

return (

<Drawer.Navigator

drawerStyle={{

width: 350,

}}>

<Drawer.Screen name="Home" component={TabNavigator} />

</Drawer.Navigator>

);

}

const App = () => {

return (

</NavigationContainer>

)

}

export default App

Happy coding :)

Example : #5.3

import React from 'react'

import { View, Text, Image, TouchableOpacity } from 'react-native'

import { createDrawerNavigator} from '@react-navigation/drawer'

import Icon from 'react-native-vector-icons/FontAwesome'

const MenuIcon = (props) => {

return (

<TouchableOpacity onPress={props.navigation}>

<View style={{ flexDirection: 'row' }}>

<View style={{ marginHorizontal: 10 }}>

<Icon size={25} name={props.iconName} />

</View>

<View>

<Text>{props.titleName}</Text>

</View>

</TouchableOpacity>

)

}

const MenuContainer = (props) => {

return (

<View>

<Image source={require('../assets/images/hn.png')} />

<View>

<MenuIcon iconName='user' titleName='Account' navigation={() => props.navigation.navigate('Account')} />

<MenuIcon iconName='bell' titleName='Notification' navigation={() => props.navigation.navigate('Notifications')} />

<MenuIcon iconName='gear' titleName='Article' navigation={() => props.navigation.navigate('Article')} />

</View>

)

}

const Accounts = () => <Text> Accounts Screen </Text>

const Notifications = () => <Text> Notifications Screen </Text>

const Articles = () => <Text> Articles Screens</Text>

const DrawerStack = createDrawerNavigator()

export default () => (

<DrawerStack.Navigator drawerContent={(props) => <MenuContainer {...props} />}>

<DrawerStack.Screen name='Account' component={Accounts} />

<DrawerStack.Screen name='Article' component={Articles} />

<DrawerStack.Screen name='Notifications' component={Notifications} />

</DrawerStack.Navigator>

)

Happy coding :)

Example : #5.5 [ with out props]

import * as React from 'react';

import { StackActions, CommonActions, DrawerActions } from '@react-navigation/native';

export const navigationRef = React.createRef();

export function navigate(name, params) {

navigationRef.current?.navigate(name, params);

}

export function push(...args) {

navigationRef.current?.dispatch(StackActions.push(...args));

}

export function closeDrawer() {

navigationRef.current?.dispatch(DrawerActions.closeDrawer());

}

export function openDrawer() {

navigationRef.current?.dispatch(DrawerActions.openDrawer());

}

export function toggleDrawer() {

navigationRef.current?.dispatch(DrawerActions.toggleDrawer());

}

export function back(key = null) {

navigationRef.current?.dispatch(CommonActions.goBack());

}

when ever u want to navigate or push a new rout u can easily do this like :

import * as RootNavigation from 'azir-services/NavigationService';

RootNavigation.push(routName, params);

React Native Drawer Navigation 4x

Step: #1

How to Building A React Native App with DrawerNavigator Using React Navigation

React Native Drawer Navigation imports the createDrawerNavigator from the react-navigation-drawer library.

looks like as below

import { createDrawerNavigator } from 'react-navigation-drawer'

Step: #2

Install library is mendatory

yarn add react-navigation

yarn add react-native-gesture-handler react-native-reanimated

or optionals

yarn add react-native-screens@^1.0.0-alpha.23.

yarn add react-navigation-drawer

yarn add react-navigation-stack

Step: #3

To finalize installation of react-native-gesture-handler for Android, make the following modifications to MainActivity.java

android\app\src\main\java\com\helloworld\MainActivity.java

import com.facebook.react.ReactActivityDelegate;

import com.facebook.react.ReactRootView;

import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

@Override

protected ReactActivityDelegate createReactActivityDelegate() {

return new ReactActivityDelegate(this, getMainComponentName()) {

@Override

protected ReactRootView createRootView() {

return new RNGestureHandlerEnabledRootView(MainActivity.this);

}

};

}

Step: #4

[OPTIONAL]

yarn add react-native-screens@^1.0.0-alpha.23.

To finalize installation of react-native-screens for Android, add the following two lines to dependencies section in android/app/build.gradle:

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'

implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

Step: #5

App.js

import React, {Component} from 'react'

import { View, Text, TouchableOpacity } from 'react-native'

import { createAppContainer } from 'react-navigation'

import { createStackNavigator } from 'react-navigation-stack'

import { createDrawerNavigator, DrawerActions } from 'react-navigation-drawer'

import Icon from 'react-native-vector-icons/Ionicons'

class Home extends Component{

render(){

return(

<View>

</View>

)

}

class Setting extends Component{

render(){

return(

<View>

<Text> Setting</Text>

</View>

)

}

const MenuIcon =({navigation})=>{

return(

// <TouchableOpacity onPress={()=> navigation.dispatch(DrawerActions.toggleDrawer())}>

<TouchableOpacity onPress={()=> navigation.openDrawer()}>

</TouchableOpacity>

)

}

const HomeStack = createStackNavigator({

Home: { screen: Home}

},{

defaultNavigationOptions:({navigation})=>({

headerLeft:<MenuIcon navigation ={navigation}/>

})

const SettingStack = createStackNavigator({

Setting:{ screen: Setting}

},{

defaultNavigationOptions:({navigation})=>({

headerLeft:<MenuIcon navigation={navigation}/>

})

const DrawerStack = createDrawerNavigator({

HomeStack,

SettingStack

})

const AppContainer = createAppContainer(DrawerStack)

class App extends Component{

render(){

return(

)

}

export default App

Step: #6

Output

Step: #7

How design or Set Menu Icons in React Native

yarn add react-native-vector-icons

Go to below project directory and copy the link paste the bottom one only

android\app\build.gradle

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

Output

Note - Just better to have re-run the project instead of to reload

Happy Coding :)

Example : # 2

Happy Coding :)

Monday, February 11, 2019

Solved: Unable to load script from assets ‘index.android.bundle’

Unable to load script from assets ‘index.android.bundle’

Step 1. Go to your project directory and check if this folder exists android/app/src/main/assets

Note => assets available or not

Step 2. If the folder assets doesn’t exist then create the assets directory there.

like that In my case

Step - 3

Finally, Back to the project directory and run the below command

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Thanks:)

Wednesday, February 6, 2019

Regenerate ios and android folder in React Native project

Regenerate ios and android folder in React Native project

I get an error saying: "Error: Couldn't

find preset module:metro-react-native-babel-preset relative to directory /<my path to the project>.

solutions:
I've had this issue. Remove everything in .babelrc
# .babelrc

Then run react-native-git-upgrade and then add the contents of .babelrc back

upgrade from RN 0.57 to 0.58. I am calling react-native-git-upgrade.

I deleted the ios and android directory in my react native app

First copy the directory which your to-be-name-changed application exists. And go to your newly cloned directory.

Change the name at index.ios/android.js file which is given as a parameter to AppRegistry.

Change the name and version accordingly on package.json

Delete /ios and /android folders which are remaining from your older app.

Run $react-native upgrade to generate /ios and /android folders again.

Run $react-native link for any native dependency.

Finally run $react-native run-ios or anything you want.

windows user

react-native upgrade //rebuilds android/ios folders
react-native link
react-native run-android

react-native run-ios

Note

The reason I use react-native upgrade is just to re-generate /ios and /android project folders.

It does not changes/updates/upgrades react native version

However I see that react-native-git-upgrade is more appropriate if you want to change the react native version of your project.

Tuesday, February 5, 2019

Flutter

How to install Flutter in VsCode and run Android Emulator

Course Syllabus

Adding Animations
Responsive and Adaptive User Interface and Apps
Navigations and Muitleple Screens
User Input and Forms
State Management(BLOC)
Http (Request, Response)
Adding Authentications
Using Device Features(Camera, maps, Locations)
Firebase, Image Upload, Push Notifications
Publishing to the App Store

Dart Flutter MaterialApp / Scaffold

      debugShowCheckedModeBanner: false,

accentColor: Colors.indigoAccent

When the page is scrolling,
ie accentColor

return Scaffold(
  resizeToAvoidBottomPadding: false,

................................................................................................................................

Step : #1 [ Basic Search ]

visit the link - https://flutter.dev/

and Click the Get started button

Step : #2 [ Install ]

https://flutter.dev/docs/get-started/install

Click Get Start to start downloading Fluttter SDK

Step : #1

Vysor Extension for chorme, it help full to connect real device

# If necessary, you can check your current Flutter version with the command:
flutter --version

Creating a New Flutter Project

# New Flutter application
flutter create flutter_http

# Open this up inside of VS Code
cd flutter_http && code .

pub publish --dry-run

flutter pub get

flutter doctor --android-licenses

......................................................................................................................................................................................................................................
Flutter : #1 [Example of Hello world ]

import 'package:flutter/material.dart';
void main(){
  runApp(myApp());
}

class myApp extends StatelessWidget{
  @override  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World'),
          backgroundColor: Colors.pinkAccent,
          centerTitle: true,
        ),
        body: Center(
            child:Text('Body part',
              style: TextStyle(
                  color: Colors.pink, fontSize: 30              ),
        ),

        ),
backgroundColor: Colors.white,
      ),
    );
  }
}

Happy Coding :)

..................................................................................................................................................................................................................................

Flutter : #1.1 [Example of StatelessWidget and StatefulWidget ]

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.    );
  }
}

Happy coding :)

..................................................................................................................................................................................................................................
Flutter : #1.2 [Example of AppBar  ]
import 'package:flutter/material.dart';

void main() => runApp(MyHello());

class MyHello extends StatelessWidget {
  @override  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Home',
      theme: ThemeData(
          primarySwatch: Colors.red,
          accentColor: Colors.red,
          appBarTheme: AppBarTheme(color: Colors.red)),
      home: Myhome(),
    );
  }
}

class Myhome extends StatefulWidget {
  @override  _MyhomeState createState() => _MyhomeState();
}

class _MyhomeState extends State<Myhome> {
  @override  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        
        leading: IconButton(
          
          onPressed: (){},
          icon: Icon(Icons.menu)
        ),
        
        actions: <Widget>[
          InkWell(
            child: IconButton(
              padding: const EdgeInsets.only(right: 20),
              icon: Icon(Icons.access_alarms, 
              
              ),
              ),
          ),
          IconButton(
            onPressed: (){},
            padding: const EdgeInsets.only(right: 10),
            icon: Icon(Icons.search),
            )
        ],
        
        title: Text('Welcome Page'),
        titleSpacing: 40,
        centerTitle: true,
      ),
    );
  }
}







..................................................................................................................................................................................................................................

Flutter : #1.3 [Example of AppBar  ]
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());class MyApp extends StatefulWidget{
  @override  _MyAppState createState()=>_MyAppState();
}class _MyAppState extends State<MyApp>{
  @override  Widget build(BuildContext context){    return MaterialApp(      title: 'Home',
      theme: ThemeData(
        primaryColor: Colors.purple[900]
      ),      home: Scaffold(        appBar: AppBar(
          title: Text('Firebase connection Demo'),
          centerTitle: true,
        ),
      ),

    );
  }
}

Single Images

All Images

import 'package:flutter/material.dart';

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
  @override  Widget build(BuildContext context){
    return Container(
      decoration: BoxDecoration(
        color: Colors.purple      ),
      child: Center(
        child: Image.asset('assets/images/images.jpg',

        //child: Image.asset('images/images.jpg',
fit: BoxFit.cover,
          width: 100.0,
          height: 100.0,
        ),
      ),
    );
  }
}

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget{
  @override  Widget build (BuildContext context){
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello world'),
        ),
        body: Center(
          child: FlatButton(
            padding: EdgeInsets.symmetric(vertical: 30.0, horizontal: 90.0),
            color: Colors.purple,
            textColor: Colors.black,
            splashColor: Colors.cyan,

            //highlightColor: Colors.amber,            onPressed: (){}, // Anonymous function            child: Text('FlatButton',
            style: TextStyle(
             // color: Colors.white,              fontSize: 24.0            ),
            ),
          ),
        ),
      ),

    );

  }
}

import 'package:flutter/material.dart';

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget{
  @override  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        appBar:AppBar(
          title: Text('Home')
        ),
        body: Center(
          child: RaisedButton(
            color: Colors.white,
            textColor: Colors.black,
            splashColor: Colors.cyan,
            padding: EdgeInsets.symmetric(vertical: 30.0, horizontal: 30.0),
            elevation: 10.0,
            highlightElevation: 30.0,
            shape: Border.all(width: 2.0, color: Colors.black),
            onPressed: (){},
            child: Text('RaiseButton',
              style: TextStyle(
                color: Colors.red,
                fontSize: 24.0              ),
            ),
          ),
        ),
      )

    );
  }
}

import 'package:flutter/material.dart';

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget{
  @override  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: Icon(Icons.accessible_forward),

        ),
        floatingActionButton: FloatingActionButton(
          onPressed: (){},
          child: Icon(Icons.add          ),
          foregroundColor: Colors.pink,
          backgroundColor: Colors.green,
          shape: RoundedRectangleBorder(),
        ),
        body: Center(
          child: RaisedButton(
            child: Icon(
              Icons.add            ),

          ),

        ),
      ),
    );
  }
}

..................................................................................................................................................................................................................................
Flutter : #6 [Example of Hello world ]

..................................................................................................................................................................................................................................
Flutter : #7 [Textfield ]

import 'package:flutter/material.dart';

void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
  @override  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Text Fields',
      theme: ThemeData(
        primaryColor: Colors.lightBlueAccent      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget{
  @override  _MyHomePageState createState()=>_MyHomePageState();
  }
class _MyHomePageState extends State<MyHomePage>{
@override  Widget build (BuildContext context){
  return Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(18.0),
          child: TextField(
            decoration: InputDecoration(
              //hintText: 'username',              prefix: Icon(Icons.account_circle),
              helperText: 'please enter username',
              labelText:'Username',
              border: OutlineInputBorder(),
            ),
            maxLength: 20,
            style: TextStyle(
              color: Colors.red,
              fontSize: 25.0,
            ),
          ),
        ),

      ],
    ),

  );
}
}

Flutter : #9 [Example of Hello world ]

..................................................................................................................................................................................................................................
Flutter : #10 [Example of Hello world ]

..................................................................................................................................................................................................................................
Flutter : #2 [Example of Hello world ]

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;

void main()=>{
  runApp(MaterialApp(
  title:'Android App',
    home: MyApp(todos:getData())
))
};
Future<Todos>getData() async {
  final response = await http.get('https://jsonplaceholder.typicode.com/todos/1');
  if (response.statusCode == 200) {
    return Todos.fromJson(json.decode(response.body));
  }
  else {
    throw Exception('No response from server');
  }
}

class Todos {
  final int user;
  final int id;
  final String title;
  final bool completed;
  Todos({this.user, this.id,this.title, this.completed });
  factory Todos.fromJson(Map<String, dynamic> json) {
    return Todos(
        user:json['userId'],
      id:json['id'],
      title:json['title'],
      completed:json['completed']
    );
  }
}
class MyApp extends StatelessWidget {
  Future<Todos>todos;
  MyApp({Key key, this.todos}): super(key:key);
  @override  Widget build(BuildContext context){
    return Scaffold(
      body: Center(
        child: FutureBuilder<Todos>(
            future: todos,
            builder: (context,snapshot){
              if(snapshot.hasData){
                return Text(snapshot.data.title);
              }
              return CircularProgressIndicator();
            }
        ),
      )
    );
  }

}

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';

void main()=>{
 runApp(MaterialApp(
   title: 'Home',

   theme: ThemeData(
     primarySwatch: Colors.red   ),
   home: MyRestApi(),

 ))
};
class MyRestApi extends StatefulWidget{
  @override  _MyRestApiState createState()=> _MyRestApiState();
}

class _MyRestApiState extends State<MyRestApi>{
  Map data;
  List userData;

  Future getData() async {
    final response = await http.get('https://reqres.in/api/users?page=2');
    data=json.decode(response.body);
    setState(() {
      userData=data["data"];
    });
    debugPrint(userData.toString());
  }
  @override  void initState(){
    super.initState();
    getData();
  }
  @overrideWidget build(BuildContext context){
    return Scaffold(
        appBar:AppBar(
          centerTitle: true,
          title: Text('How to call FAKE API'),
        ),
      body:ListView.builder(
        itemCount: userData == null ? 0 : userData.length,
          itemBuilder: (BuildContext context, int index){
          return Card(
            child: Row(
              children: <Widget>[
                CircleAvatar(
                  backgroundImage: NetworkImage(userData[index]["avatar"]),
                ),
                Text("${userData[index]["first_name"]} ${userData[index]["last_name"]}" ,
                style: TextStyle(
                  fontSize: 20,
                ),
                )
              ],
            ),
          );
        }
      ) ,
    );
  }
}

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  @override  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Maps Sample App'),
          backgroundColor: Colors.green[700],
        ),
        body: GoogleMap( initialCameraPosition: CameraPosition(
          target: LatLng(37.77483, -122.41942),
          zoom: 12           ),
          ),
        ),
    );
  }
}

import 'package:flutter/material.dart';
void main()=> runApp(MyApp());
class MyApp extends StatelessWidget{
  @override  Widget build(BuildContext context){
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Home',
      theme: ThemeData(
        backgroundColor: Colors.red,
        accentColor: Colors.yellowAccent,
        primarySwatch: Colors.green,          appBarTheme: AppBarTheme(color:Colors.white, elevation: 5),      ),
      home: MyHome(),
    );
  }
}class MyHome extends StatefulWidget{
  MyHome({Key key, this.title}):super(key:key);
  final String title;
  @override  _MyHomeState createState()=> _MyHomeState();
}class _MyHomeState extends State<MyHome>{
  @override  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Grid View', style: TextStyle(color: Colors.green),),
      ),
      body: GridView.count(
          crossAxisCount: 2,
        children: <Widget>[
          Center(
            child:Text('Hello World'),
          ),
          Center(
            child:Text('Hello World'),
          ),Center(
            child:Text('Hello World'),
          ),Center(
            child:Text('Hello World'),
          ),Center(
            child:Text('Hello World'),
          ),Center(
            child:Text('Hello World'),
          ),Center(
            child:Text('Hello World'),
          ),Center(
            child:Text('Hello World'),
          ),

        ],

      ),
    );
  }
}

..................................................................................................................................................................................................................................
..................................................................................................................................................................................................................................

Flutter : #2 [Example of Hello world ]