Donna Corriveau

Donna Corriveau

1564641706

Build CRUD Mobile App using React Native, Elements, Navigation, Apollo Client and GraphQL

A comprehensive step by step tutorial on learn to build CRUD (Create, Read, Update, Delete) using React Native, Elements, Navigation, Apollo Client and GraphQL

We will use existing Node.js, Express.js, MongoDB, and GraphQL that already created in React.js tutorial. So, we will focus on accessing GraphQL from the React Native Mobile Apps. Same exactly as React.js tutorial, we will use Apollo Client GraphQL to integrating with React Native.

The flow of CRUD Mobile Apps is very basic. It just the main page that shows the list of data, the details page, the edit, and the create data page. In this tutorial, we will use React Native and React Native Elements components including ScrollView, TextInput, Text, Button, View, etc. The list page contains a list of the book with the details button and a button to add new data on the right corner of the header. The details page contains data details text, the back button on the left corner of the header, an edit button and a delete button. The add-data page contains a React Native form, back button, and save button. The edit-data page contains the React Native form, back data, and update button. Simply as that, we will try to build this React Native Mobile Apps to Android and iOS devices.

The Example of React Native Navigation and Elements wrap together with Apollo Client GraphQL

The following tools, frameworks, and modules are required for this tutorial:

Before start to the main steps, make sure that you have installed Node.js and can run npm in the terminal or command line. To check the existing or installed Node.js environment open the terminal/command line then type this command.

node -v
v10.15.1
npm -v
6.9.0
yarn -v
1.10.1

React Native and Apollo GraphQL Tutorial: Install create-react-native-app and Create App

The create-react-native-app is a tool for creating a React Native App. To install it, type this command in your App projects folder.

sudo npm install -g create-react-native-app

Then create a React Native App using this create-react-native-app command.

create-react-native-app RnGraphql

If there question to install Expo, just type Y and choose a blank template because we will add the navigation later. That command will create a React Native app then install all required modules. The app or project folder will contain these folders and files.

|-- App.js
|-- app.json
|-- assets
| |-- icon.png
| `-- splash.png
|-- node_modules
`-- package.json

Next, go to the newly created React App folder.

cd RnGraphql

This React Native App is running via Expo app, before running on your Android or iOS device, make sure you have to install the Expo App to Android or Expo Client to iOS. Of course, that app is available in the App Store. So, we assume that you have installed the Expo App in your device then type this command to run the app.

npm start
or
yarn start

You will see this barcode and instruction in the terminal or command line.

To open the app in the Android device, open the Expo App first then tap on Scan QR Code button. Scan the barcode in the terminal or command line then you will see the React Native Android App like this after waiting for minutes the build process.

For iOS Device, press s from the keyboard to send React Native App URL to your Email or SMS. Enter your phone number or Email address (We use an email address) then press Enter. You will get this email to your mailbox.

Choose open in Expo URL then open in your browser, that will be redirected to Expo App. In Expo App welcome screen, shake your phone to open the React Native App. Now, you will see this screen in your iOS device.

Make sure you have the same network between your device and your development computer.

React Native and Apollo GraphQL Tutorial: Add Navigation Header and required Screen

As you see, the React Native app that you can only show plain text which unlike the standard Android or iOS Mobile Apps. To make a standard Android or iOS Mobile Apps, we need to add React Native header and navigation button with an icon to the React Native view. Type this command to install React Native Navigation (react-navigation).

yarn add react-navigation

Also, add the React Native Gesture Handler module by type this command.

yarn add react-native-gesture-handler

We have to link react-native to react-native-gesture-handler.

react-native link react-native-gesture-handler

Next, create a folder for components and components files in the root of the app folder by type these commands.

mkdir components
touch components/BooksScreen.js
touch components/BookDetailScreen.js
touch components/AddBookScreen.js
touch components/EditBookScreen.js

We will fill that files with simple React Native Button, Text, View, props, and navigation. Open and edit components/BooksScreen.js then add this React codes.

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

class BooksScreen extends Component {
 static navigationOptions = {
  title: 'Books List',
 };
 render() {
  return (
   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Books List</Text>
    <Button
     title="Go to Details"
     onPress={() => this.props.navigation.navigate('BookDetails')}
    />
    <Button
     title="Go to Add Book"
     onPress={() => this.props.navigation.navigate('AddBook')}
    />
    <Button
     title="Go to Edit Book"
     onPress={() => this.props.navigation.navigate('EditBook')}
    />
   </View>
  );
 }
}

export default BooksScreen;

Open and edit components/BookDetailScreen.js then add this React codes.

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

class BookDetailScreen extends Component {
 static navigationOptions = {
  title: 'Book Details',
 };
 render() {
  return (
   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Book Details</Text>
    <Button
     title="Go to Details... again"
     onPress={() => this.props.navigation.push('BookDetails')}
    />
    <Button
     title="Go to Home"
     onPress={() => this.props.navigation.navigate('Book')}
    />
    <Button
     title="Go back"
     onPress={() => this.props.navigation.goBack()}
    />
   </View>
  );
 }
}

export default BookDetailScreen;

Open and edit components/AddBookScreen.js then add this React codes.

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

class AddBookScreen extends Component {
 static navigationOptions = {
  title: 'Add Book',
 };
 render() {
  return (
   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Add Book</Text>
    <Button
     title="Go to Add Book... again"
     onPress={() => this.props.navigation.push('AddBook')}
    />
    <Button
     title="Go to Home"
     onPress={() => this.props.navigation.navigate('Book')}
    />
    <Button
     title="Go back"
     onPress={() => this.props.navigation.goBack()}
    />
   </View>
  );
 }
}

export default AddBookScreen;

Open and edit components/EditBookScreen.js then add this React codes.

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

class EditBookScreen extends Component {
 static navigationOptions = {
  title: 'Edit Book',
 };
 render() {
  return (
   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Add Book</Text>
    <Button
     title="Go to Edit Book... again"
     onPress={() => this.props.navigation.push('EditBook')}
    />
    <Button
     title="Go to Home"
     onPress={() => this.props.navigation.navigate('Book')}
    />
    <Button
     title="Go back"
     onPress={() => this.props.navigation.goBack()}
    />
   </View>
  );
 }
}

export default EditBookScreen;

Next, open and edit App.js then add replace all codes with this.

import { createStackNavigator, createAppContainer } from 'react-navigation';
import BooksScreen from './components/BooksScreen';
import BookDetailScreen from './components/BookDetailScreen';
import AddBookScreen from './components/AddBookScreen';
import EditBookScreen from './components/EditBookScreen';

const MainNavigator = createStackNavigator({
 Book: { screen: BooksScreen },
 BookDetails: { screen: BookDetailScreen },
 AddBook: { screen: AddBookScreen },
 EditBook: { screen: EditBookScreen },
});

const App = createAppContainer(MainNavigator);

export default App;

Next, run again the React Native app then refresh your Expo app. You will see the standard Android or iOS Mobile Apps in your device screen.

React Native and Apollo GraphQL Tutorial: Install and Configure Apollo Client GraphQL

Now, we have to install and configure all of the required modules and dependencies to the **React Apollo **and GraphQL. Type this command to install the modules at once.

yarn add react-apollo apollo-client apollo-cache-inmemory apollo-link-http graphql-tag graphql

Next, open and edit App.js then replace all imports with these imports.

import React from 'react';
import { AppRegistry } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import BooksScreen from './components/BooksScreen';
import BookDetailScreen from './components/BookDetailScreen';
import AddBookScreen from './components/AddBookScreen';
import EditBookScreen from './components/EditBookScreen';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { ApolloProvider } from 'react-apollo';

Change the constant name of createAppContainer constant variable.

const MyRootComponent = createAppContainer(MainNavigator);

Add these lines of Apollo Client constant variables.

const cache = new InMemoryCache();
const client = new ApolloClient({
 cache,
 link: new HttpLink({
    uri: 'http://localhost:3000/graphql',
 }),
});

const App = () => (
 <ApolloProvider client={client}>
  <MyRootComponent />
 </ApolloProvider>
);

Register the Apollo Provider by adding this line before the export line.

AppRegistry.registerComponent('MyApp', () => App);

React Native and Apollo GraphQL Tutorial: Show List of Books

To show the list of the books in the Books components, open and edit components/BooksScreen.js then add/replace these imports.

import React, { Component } from 'react';
import { StyleSheet, FlatList, ActivityIndicator, View, Text } from 'react-native';
import { ListItem, Button } from 'react-native-elements';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';

As you can see, there are view elements that use react-native-elements module. For that, install the react-native-elements module first by type this command.

yarn add react-native-elements

Declare a constant before the class name for the query.

const GET_BOOKS = gql`
 {
  books {
   _id
   title
   author
  }
 }
`;

Replace navigationOptions with this.

static navigationOptions = ({ navigation }) => {
  return {
    title: 'LIST OF BOOKS',
    headerRight: (
    <Button
      buttonStyle={{ padding: 0, backgroundColor: 'transparent' }}
      icon={{ name: 'add-circle', style: { marginRight: 0, fontSize: 28 } }}
      onPress={() => { navigation.push('AddBook') }}
    />
    ),
  };
};

Add the function to extract and mapping result from GraphQL and render list item from the FlatList that will be added to the render section.

keyExtractor = (item, index) => index.toString()

renderItem = ({ item }) => (
  <ListItem
    title={item.title}
    onPress={() => {
      this.props.navigation.navigate('BookDetails', {
        id: `${item._id}`,
      });
    }}
    chevron
    bottomDivider
  />
)

Replace all React Native view render with Apollo Client GraphQL Query with pollInterval to make the page always request GraphQL data.

render() {
  return (
    <Query pollInterval={500} query={GET_BOOKS}>
      {({ loading, error, data }) => {
        if (loading) return(
          <View style={styles.activity}>
            <ActivityIndicator size="large" color="#0000ff"/>
          </View>
        );
        if (error) return(
          <View style={styles.activity}>
            <Text>`Error! ${error.message}`</Text>
          </View>
        );
        return (
          <FlatList
            keyExtractor={this.keyExtractor}
            data={data.books}
            renderItem={this.renderItem}
          />
        );
      }}
    </Query>
  );
}

Add React Native styles constant variables before the export code.

const styles = StyleSheet.create({
 container: {
   flex: 1,
   paddingBottom: 22
 },
 item: {
   padding: 10,
   fontSize: 18,
   height: 44,
 },
 activity: {
   position: 'absolute',
   left: 0,
   right: 0,
   top: 0,
   bottom: 0,
   alignItems: 'center',
   justifyContent: 'center'
 }
})

React Native and Apollo GraphQL Tutorial: Show a Book Details

To show book details, we have to modify components/BookDetailScreen.js then replace all imports with these imports.

import React, { Component } from 'react';
import { ScrollView, StyleSheet, ActivityIndicator, View, Text } from 'react-native';
import { Card, Button } from 'react-native-elements';
import gql from 'graphql-tag';
import { Query, Mutation } from 'react-apollo';

Declare the constant variables of the GraphQL gql or Queries.

const GET_BOOK = gql`
  query book($bookId: String) {
    book(id: $bookId) {
      _id
      isbn
      title
      author
      description
      published_year
      publisher
      updated_date
    }
  }
`;

const DELETE_BOOK = gql`
 mutation removeBook($id: String!) {
  removeBook(id:$id) {
   _id
  }
 }
`;

Modify the render section of the class to display a book details by implementing Apollo GraphQL Query and React Native ScrollView, Card, View, Button, Text, ActivityIndicator, etc.

class BookDetailScreen extends Component {
 static navigationOptions = {
  title: 'Book Details',
 };
 render() {
  const { navigation } = this.props;
  return (
    <Query pollInterval={500} query={GET_BOOK} variables={{ bookId: navigation.getParam('id') }}>
      {({ loading, error, data }) => {
        if (loading) return(<View style={styles.activity}>
          <ActivityIndicator size="large" color="#0000ff" />
         </View>);
        if (error) return(<Text>`Error! ${error.message}`</Text>);
        return (
          <ScrollView>
            <Card style={styles.container}>
              <View style={styles.subContainer}>
                <View>
                  <Text style={{fontSize: 16, fontWeight: 'bold'}}>ISBN:</Text>
                  <Text style={{fontSize: 18, marginBottom: 10}}>{data.book.isbn}</Text>
                </View>
                <View>
                  <Text style={{fontSize: 16, fontWeight: 'bold'}}>Title: </Text>
                  <Text style={{fontSize: 18, marginBottom: 10}}>{data.book.title}</Text>
                </View>
                <View>
                  <Text style={{fontSize: 16, fontWeight: 'bold'}}>Author: </Text>
                  <Text style={{fontSize: 18, marginBottom: 10}}>{data.book.author}</Text>
                </View>
                <View>
                  <Text style={{fontSize: 16, fontWeight: 'bold'}}>Description: </Text>
                  <Text style={{fontSize: 18, marginBottom: 10}}>{data.book.description}</Text>
                </View>
                <View>
                  <Text style={{fontSize: 16, fontWeight: 'bold'}}>Published Year: </Text>
                  <Text style={{fontSize: 18, marginBottom: 10}}>{data.book.published_year}</Text>
                </View>
                <View>
                  <Text style={{fontSize: 16, fontWeight: 'bold'}}>Publisher: </Text>
                  <Text style={{fontSize: 18, marginBottom: 10}}>{data.book.publisher}</Text>
                </View>
                <View>
                  <Text style={{fontSize: 16, fontWeight: 'bold'}}>Updated Date: </Text>
                  <Text style={{fontSize: 18}}>{data.book.updated_date}</Text>
                </View>
              </View>
              <Mutation mutation={DELETE_BOOK} key={data.book._id} onCompleted={() => navigation.goBack()}>
                {(removeBook, { loading2, error2 }) => (
                  <View style={styles.subContainer}>
                    <Button
                    style={styles.detailButton}
                    large
                    backgroundColor={'#CCCCCC'}
                    leftIcon={{name: 'edit'}}
                    title='Edit'
                    onPress={() => {
                      navigation.navigate('EditBook', { id: `${data.book._id}`, });
                    }} />
                    <Button
                    style={styles.detailButton}
                    large
                    backgroundColor={'#999999'}
                    color={'#FFFFFF'}
                    leftIcon={{name: 'delete'}}
                    title='Delete'
                    onPress={() => {
                      removeBook({ variables: { id: data.book._id } })
                      .then(res => res)
                      .catch(err => <Text>{err}</Text>);
                    }} />
                    {loading2 && <View style={styles.activity}>
                      <ActivityIndicator size="large" color="#0000ff" />
                     </View>}
                    {error2 && <Text>`Error! ${error2.message}`</Text>}
                  </View>
                )}
              </Mutation>
            </Card>
          </ScrollView>
        );
      }}
    </Query>
  );
 }
}

Modify or add the React Native style to match the modified details page.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  subContainer: {
    flex: 1,
    paddingBottom: 20,
    borderBottomWidth: 2,
    borderBottomColor: '#CCCCCC',
  },
  activity: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'
  },
  detailButton: {
    marginTop: 10
  }
})

React Native and Apollo GraphQL Tutorial: Add a New Book

To add a new book, we have an add button in the List of Book page that will push the Add Page. This Add Page will use Apollo GraphQL Mutation instead of React Form. The React Native TextInput change will use a function that triggers the OnChange event. Open and edit components/AddBookScreen.js then replace all imports with these imports.

import React, { Component } from 'react';
import { StyleSheet, ScrollView, ActivityIndicator, View, TextInput, Text } from 'react-native';
import { Button } from 'react-native-elements';
import gql from "graphql-tag";
import { Mutation } from "react-apollo";

Declare a constant variable of the Apollo GraphQL gql or Query before the class name.

const ADD_BOOK = gql`
  mutation AddBook(
    $isbn: String!,
    $title: String!,
    $author: String!,
    $description: String!,
    $publisher: String!,
    $published_year: Int!) {
    addBook(
      isbn: $isbn,
      title: $title,
      author: $author,
      description: $description,
      publisher: $publisher,
      published_year: $published_year) {
      _id
    }
  }
`;

Add an object of the state after the navigationOptions that consists of required fields that match the GraphQL data.

state = {
 isbn: '',
 title: '',
 author: '',
 description: '',
 published_year: '',
 publisher: '',
}

Add a function to update the React Native TextInput value and state object values.

updateTextInput = (text, field) => {
 const state = this.state
 state[field] = text;
 this.setState(state);
}

Modify the React Native render section to add Apollo GraphQL Mutation, React Native TextInput, ScrollView, View, ActivityIndicator, etc.

render() {
  const { isbn, title, author, description, published_year, publisher } = this.state;
  return (
   <Mutation mutation={ADD_BOOK} onCompleted={() => this.props.navigation.goBack()}>
     {(addBook, { loading, error }) => (
      <ScrollView style={styles.container}>
       <View style={styles.subContainer}>
        <TextInput
          style={styles.textInput}
          placeholder={'ISBN'}
          value={this.state.isbn}
          onChangeText={(text) => this.updateTextInput(text, 'isbn')}
        />
       </View>
       <View style={styles.subContainer}>
        <TextInput
          style={styles.textInput}
          placeholder={'Title'}
          value={this.state.title}
          onChangeText={(text) => this.updateTextInput(text, 'title')}
        />
       </View>
       <View style={styles.subContainer}>
        <TextInput
          style={styles.textInput}
          placeholder={'Author'}
          value={this.state.author}
          onChangeText={(text) => this.updateTextInput(text, 'author')}
        />
       </View>
       <View style={styles.subContainer}>
        <TextInput
          style={styles.textInput}
          placeholder={'Description'}
          multiline={true}
          numberOfLines={4}
          value={this.state.description}
          onChangeText={(text) => this.updateTextInput(text, 'description')}
        />
       </View>
       <View style={styles.subContainer}>
        <TextInput
          style={styles.textInput}
          placeholder={'Published Year'}
          value={this.state.published_year}
          keyboardType='numeric'
          onChangeText={(text) => this.updateTextInput(text, 'published_year')}
        />
       </View>
       <View style={styles.subContainer}>
        <TextInput
          style={styles.textInput}
          placeholder={'Publisher'}
          value={this.state.publisher}
          onChangeText={(text) => this.updateTextInput(text, 'publisher')}
        />
       </View>
       <View>
        <Button
         large
         leftIcon={{name: 'save'}}
         title='Save'
         onPress={() => {
          addBook({
           variables: {
            isbn: this.state.isbn,
            title: this.state.title,
            author: this.state.author,
            description: this.state.description,
            publisher: this.state.publisher,
            published_year: parseInt(this.state.published_year),
           }
          })
           .then(res => this.setState({ isbn: '', title: '', author: '', description: '', published_year: '', publisher }))
           .catch(err => <Text>{err}</Text>);
         }} />
       </View>
       {loading && <View style={styles.activity}>
         <ActivityIndicator size="large" color="#0000ff" />
        </View>}
       {error && <Text>`Error! ${error.message}`</Text>}
      </ScrollView>
     )}
    </Mutation>
  );
 }
}

Also, modify the React Native style to match the required views.

const styles = StyleSheet.create({
 container: {
  flex: 1,
  padding: 20
 },
 subContainer: {
  flex: 1,
  marginBottom: 20,
  padding: 5,
  borderBottomWidth: 2,
  borderBottomColor: '#CCCCCC',
 },
 activity: {
  position: 'absolute',
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  alignItems: 'center',
  justifyContent: 'center'
 },
 textInput: {
  fontSize: 18,
  margin: 5,
 },
})

React Native and Apollo GraphQL Tutorial: Edit a Book

The Edit Book Screen pushed from the Book Details Screen. Same as the previous Add Book Page, this page will contain the Apollo GraphQL Mutation and React Native TextInput with additional Apollo GraphQL Query. All React Native TextInput will fill with the data from GraphQL Query. Open and edit components/EditBookScreen.js then replace all imports with these imports.

import React, { Component } from 'react';
import { StyleSheet, ScrollView, ActivityIndicator, View, TextInput, Text } from 'react-native';
import { Button } from 'react-native-elements';
import gql from "graphql-tag";
import { Query, Mutation } from "react-apollo";

Declare the constant variables of the Apollo GraphQL Query or gql after the imports.

const GET_BOOK = gql`
  query book($bookId: String) {
    book(id: $bookId) {
      _id
      isbn
      title
      author
      description
      published_year
      publisher
      updated_date
    }
  }
`;

const UPDATE_BOOK = gql`
  mutation updateBook(
    $id: String!,
    $isbn: String!,
    $title: String!,
    $author: String!,
    $description: String!,
    $publisher: String!,
    $published_year: Int!) {
    updateBook(
    id: $id,
    isbn: $isbn,
    title: $title,
    author: $author,
    description: $description,
    publisher: $publisher,
    published_year: $published_year) {
      updated_date
    }
  }
`;

The above constant variables are Apollo GraphQL Query of the GET and the UPDATE Book data. Next, inside the main class, add an object of the state that contains required fields.

state = {
 isbn: '',
 title: '',
 author: '',
 description: '',
 published_year: '',
 publisher: '',
}

Add a function to update only the state instead of the state and the fields because the fields will fill with the data from GraphQL. In this case, you can’t call setState twice to fill the state, so, we fill the state and the fields separately.

updateTextInput = (text, field) => {
 const state = this.state
 state[field] = text;
 this.setState(state);
}

Modify the React Native render section to Apollo GraphQL Query, Mutation, React Native ScrollView, View, TextInput, Button, etc.

render() {
  const { navigation } = this.props;
  const { isbn, title, author, description, published_year, publisher } = this.state;
  return (
   <Query query={GET_BOOK} variables={{ bookId: navigation.getParam('id') }}>
    {({ loading, error, data }) => {
     if (loading) return(<View style={styles.activity}>
       <ActivityIndicator size="large" color="#0000ff" />
      </View>);
     if (error) return(<Text>`Error! ${error.message}`</Text>);
     return (
      <Mutation mutation={UPDATE_BOOK} key={data.book._id} onCompleted={() => navigation.goBack()}>
       {(updateBook, { loading2, error2 }) => (
        <ScrollView style={styles.container}>
         <View style={styles.subContainer}>
          <TextInput
            style={styles.textInput}
            placeholder={'ISBN'}
            defaultValue={data.book.isbn}
            onChangeText={(text) => this.updateTextInput(text, 'isbn')}
          />
         </View>
         <View style={styles.subContainer}>
          <TextInput
            style={styles.textInput}
            placeholder={'Title'}
            defaultValue={data.book.title}
            onChangeText={(text) => this.updateTextInput(text, 'title')}
          />
         </View>
         <View style={styles.subContainer}>
          <TextInput
            style={styles.textInput}
            placeholder={'Author'}
            defaultValue={data.book.author}
            onChangeText={(text) => this.updateTextInput(text, 'author')}
          />
         </View>
         <View style={styles.subContainer}>
          <TextInput
            style={styles.textInput}
            placeholder={'Description'}
            multiline={true}
            numberOfLines={4}
            defaultValue={data.book.description}
            onChangeText={(text) => this.updateTextInput(text, 'description')}
          />
         </View>
         <View style={styles.subContainer}>
          <TextInput
            style={styles.textInput}
            placeholder={'Published Year'}
            defaultValue={data.book.published_year.toString()}
            keyboardType='numeric'
            onChangeText={(text) => this.updateTextInput(text, 'published_year')}
          />
         </View>
         <View style={styles.subContainer}>
          <TextInput
            style={styles.textInput}
            placeholder={'Publisher'}
            defaultValue={data.book.publisher}
            onChangeText={(text) => this.updateTextInput(text, 'publisher')}
          />
         </View>
         <View>
          <Button
           large
           leftIcon={{name: 'save'}}
           title='Save'
           onPress={() => {
            if (this.state.isbn === '')
             this.state.isbn = data.book.isbn;
            if (this.state.title === '')
             this.state.title = data.book.title;
            if (this.state.author === '')
             this.state.author = data.book.author;
            if (this.state.description === '')
             this.state.description = data.book.description;
            if (this.state.publisher === '')
             this.state.publisher = data.book.publisher;
            if (this.state.published_year === '')
             this.state.published_year = data.book.published_year;
            updateBook({
             variables: {
              id: data.book._id,
              isbn: this.state.isbn,
              title: this.state.title,
              author: this.state.author,
              description: this.state.description,
              publisher: this.state.publisher,
              published_year: parseInt(this.state.published_year),
             }
            })
             .then(res => res)
             .catch(err => <Text>{err}</Text>);
           }} />
         </View>
         {loading2 && <View style={styles.activity}>
           <ActivityIndicator size="large" color="#0000ff" />
          </View>}
         {error2 && <Text>`Error! ${error2.message}`</Text>}
        </ScrollView>
       )}
      </Mutation>
     );
    }}
   </Query>
  );
 }
}

Modify the React Native style to match the view requirements.

const styles = StyleSheet.create({
 container: {
  flex: 1,
  padding: 20
 },
 subContainer: {
  flex: 1,
  marginBottom: 20,
  padding: 5,
  borderBottomWidth: 2,
  borderBottomColor: '#CCCCCC',
 },
 activity: {
  position: 'absolute',
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  alignItems: 'center',
  justifyContent: 'center'
 },
 textInput: {
  fontSize: 18,
  margin: 5,
 },
})

React Native and Apollo GraphQL Tutorial: Run and Test the Mobile Apps

Before running the React Native apps, we have to download and run the Node.js, Express.js, MongoDB GraphQL server. After download and install the required Node modules, run first the MongoDB server in the different terminal tab.

mongod

Run the Express.js GraphQL server in another terminal tab.

nodemon

In the current React Native app terminal tab, run the React Native app.

yarn start

Open again the Expo app on your iOS or Android device then refresh the current running React Native application. And here they are the full React Native Mobile Apps running with Apollo GraphQL data.

That it’s, the React Native and Apollo GraphQL Tutorial: Build Mobile Apps with React Native Elements and Navigation. You can find the full source code from our GitHub.

#mobile-apps #react-native #apollo #graphql

What is GEEK

Buddha Community

Build CRUD Mobile App using React Native, Elements, Navigation, Apollo Client and GraphQL
Autumn Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Skenix Infotech

Skenix Infotech

1600687794

React Native Mobile App Development

React Native is a framework that allows you to build mobile applications for both Android and iOS platforms using a similar codebase. This can shorten the development time and reduce the overall cost of building mobile apps.

Looking to create Mobile Applications but low in the budget? Contact Skenix Infotech now to get the most effective React Native Mobile App Development Services.

#react native development #mobile app development #react native ios app #react native ui #react native mobile app #react native

AppClues Infotech

AppClues Infotech

1625050361

Top 10 React Native App Development Companies in USA

React Native is the most popular dynamic framework that provides the opportunity for Android & iOS users to download and use your product. Finding a good React Native development company is incredibly challenging. Use our list as your go-to resource for React Native app development Companies in USA.

List of Top-Rated React Native Mobile App Development Companies in USA:

  1. AppClues Infotech
  2. WebClues Infotech
  3. AppClues Studio
  4. WebClues Global
  5. Data EximIT
  6. Apptunix
  7. BHW Group
  8. Willow Tree:
  9. MindGrub
  10. Prismetric

A Brief about the company details mentioned below:

1. AppClues Infotech
As a React Native Mobile App Development Company in USA, AppClues Infotech offers user-centered mobile app development for iOS & Android. Since their founding in 2014, their React Native developers create beautiful mobile apps.

They have a robust react native app development team that has high knowledge and excellent strength of developing any type of mobile app. They have successfully delivered 450+ mobile apps as per client requirements and functionalities.
Website: https://www.appcluesinfotech.com/

2. WebClues Infotech
WebClues Infotech is the Top-Notch React Native mobile app development company in USA & offering exceptional service worldwide. Since their founding in 2014, they have completed 950+ web & mobile apps projects on time.

They have the best team of developers who has an excellent knowledge of developing the most secure, robust & Powerful React Native Mobile Apps. From start-ups to enterprise organizations, WebClues Infotech provides top-notch React Native App solutions that meet the needs of their clients.
Website: https://www.webcluesinfotech.com/

3. AppClues Studio
AppClues Studio is one of the top React Native mobile app development company in USA and offers the best service worldwide at an affordable price. They have a robust & comprehensive team of React Native App developers who has high strength & extensive knowledge of developing any type of mobile apps.
Website: https://www.appcluesstudio.com/

4. WebClues Global
WebClues Global is one of the best React Native Mobile App Development Company in USA. They provide low-cost & fast React Native Development Services and their React Native App Developers have a high capability of serving projects on more than one platform.

Since their founding in 2014, they have successfully delivered 721+ mobile app projects accurately. They offer versatile React Native App development technology solutions to their clients at an affordable price.
Website: https://www.webcluesglobal.com/

5. Data EximIT
Hire expert React Native app developer from top React Native app development company in USA. Data EximIT is providing high-quality and innovative React Native application development services and support for your next projects. The company has been in the market for more than 8 years and has already gained the trust of 553+ clients and completed 1250+ projects around the globe.

They have a large pool of React Native App developers who can create scalable, full-fledged, and appealing mobile apps to meet the highest industry standards.
Website: https://www.dataeximit.com/

6. Apptunix
Apptunix is the best React Native App Development Company in the USA. It was established in 2013 and vast experience in developing React Native apps. After developing various successful React Native Mobile Apps, the company believes that this technology helps them incorporate advanced features in mobile apps without influencing the user experience.
Website: https://www.apptunix.com/

7. BHW Group
BHW Group is a Top-Notch React Native Mobile App Development Company in the USA. The company has 13+ years of experience in providing qualitative app development services to clients worldwide. They have a compressive pool of React Native App developers who can create scalable, full-fledged, and creative mobile apps to meet the highest industry standards.
Website: https://thebhwgroup.com/

8. Willow Tree:
Willow Tree is the Top-Notch React Native Mobile App Development Company in the USA & offering exceptional React Native service. They have the best team of developers who has an excellent knowledge of developing the most secure, robust & Powerful React Native Mobile Apps. From start-ups to enterprise organizations, Willow Tree has top-notch React Native App solutions that meet the needs of their clients.
Website: https://willowtreeapps.com/

9. MindGrub
MindGrub is a leading React Native Mobile App Development Company in the USA. Along with React Native, the company also works on other emerging technologies like robotics, augmented & virtual reality. The Company has excellent strength and the best developers team for any type of React Native mobile apps. They offer versatile React Native App development technology solutions to their clients.
Website: https://www.mindgrub.com/

10. Prismetric
Prismetric is the premium React Native Mobile App Development Company in the USA. They provide fast React Native Development Services and their React Native App Developers have a high capability of serving projects on various platforms. They focus on developing customized solutions for specific business requirements. Being a popular name in the React Native development market, Prismetric has accumulated a specialty in offering these services.
Website: https://www.prismetric.com/

#top rated react native app development companies in usa #top 10 react native app development companies in usa #top react native app development companies in usa #react native app development technologies #react native app development #hire top react native app developers in usa

AppClues Infotech

AppClues Infotech

1617268431

Hire Top-Notch React Native App Developers in USA

Do you want to hire talented & highly skilled React Native mobile app developers in USA? AppClues Infotech has the best team of dedicated React Native App designers & developers that provide the complete React Native solution & listed the top-notch USA-based companies list for your kind information.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#hire best react native app developers in usa #hire react native mobile app developers #top react native development companies #top react native app development company in usa #best react native app development services provider company #custom react native app development company

AppClues Infotech

AppClues Infotech

1616140045

Top Rated React Native Development Agency

AppClues Infotech is a premier & leading React Native app Development Company in USA having highly skilled React Native app developers offering robust services with the latest technology & functionalities.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#react native app development company #top react native app development company in usa #best react native app development services usa #react native mobile development #react native mobile development #top react native app development companies usa