Rozolin: CRUD using React native + Realm + NativeBase

Suppose that you have React native installed in your machine.

Create the project

 
react-native init ReactNativeRealmNativeBaseCRUD

The project is created, now we need to intall the realm enter in project directory

 
cd ReactNativeRealmNativeBaseCRUD/

and run the command

 
npm install --save realm

and

 
react-native link realm

install NativeBase:

 
npm install native-base --save

and

 
react-native link react-native-vector-icons

create a direcotory called "src" projects root dir with 3 subdirectories "pages", "realm" and "styles". In "styles" subdirectory create a file called "baseStyles.js" and add this code:

 
'use strict';
import React, {
  StyleSheet
} from 'react-native';

module.exports = StyleSheet.create({
  container: {
    alignItems: 'stretch',
    flex: 1
  },
  body: {
    flex: 9,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center',
    backgroundColor: '#F5FCFF',
  },
  tabContent: {
    flex: 1,
    alignItems:'stretch',
    //justifyContent:'center',
    backgroundColor: '#F5FCFF',
  },
  toolbar: {
        height: 56,
    backgroundColor: '#e9eaed',
  },
  navbar: {
    alignItems: 'center',
    backgroundColor: '#fff',
    borderBottomColor: '#eee',
    borderColor: 'transparent',
    borderWidth: 1,
    justifyContent: 'center',
    height: 54,
    flexDirection: 'row'
  },
  textInput: {
    height: 60,
    width: 300,

  },

searchBar: {
    height: 60,
    backgroundColor: 'white'
  },
  transparentButton: {
    marginTop: 10,
    padding: 15
  },
  transparentButtonText: {
    color: '#0485A9',
    textAlign: 'center',
    fontSize: 16
  },
  primaryButton: {
    margin: 10,
    padding: 15,
    backgroundColor: '#529ecc'
  },
  primaryButtonText: {
    color: '#FFF',
    textAlign: 'center',
    fontSize: 18
  },
  image: {
    width: 100,
    height: 100
  },
  listView: {
    flex: 1,
  },
  listItem: {
    borderBottomColor: '#eee',
    borderColor: 'gray',
    flexDirection:'row',
    alignItems:'center',
    borderWidth: 1,
    padding:20
  },
  textLabel: {
    fontFamily: 'Cochin',
  },
  textProp: {
    fontSize: 20,
    fontWeight: 'bold',
  }
});

in realm add a file RealmSchemas.js

 
import Realm from 'realm'

const TaskSchema = {
  	name: 'Task',
  	primaryKey: 'id',
  	properties: {
		id: 'int',
    description:  'string'
		}
};


// Initialize a Realm with models
let realmSchema = new Realm({schema: [TaskSchema]});
export default realmSchema;

in pages subdirectory create 5 files "TaskDetail.js", "TaskItem.js", "TaskList.js", "TaskSave.js" and "TaskService.js".
TaskDetail.js

 
'use strict';
import {
  Alert,
  Text,
  TouchableHighlight,
  ScrollView,
  ToastAndroid,
  View
} from 'react-native';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon, InputGroup, Input } from 'native-base';
import styles from '../../styles/baseStyles.js';
import React, {Component} from 'react';

import TaskSave from './TaskSave';
import TaskService from './TaskService';

export default class TaskDetail extends Component {
  constructor(props) {
    super(props);
    console.log(this.props.route.obj);
  }

  edit(){
      this.props.navigator.push({
        component: TaskSave,
        callbackUpdateList: this.props.route.callbackUpdateList,
        editObj: this.props.route.obj
      });
    }

    delete(){
      Alert.alert(
          'Delete',
          'Do you want to delete this task?',
          [
            {text: 'Cancelar', onPress: () => console.log('Cancel Pressed!')},
            {text: 'Yes', onPress: () => {
              TaskService.delete(this.props.route.obj);
              this.props.route.callbackUpdateList();
              this.props.navigator.pop();
            }},
          ]
        )
    }

  back = () => {
    this.props.navigator.pop();
  }

  render() {
    let obj = this.props.route.obj;
    const content =  
        
            
              Description
            
            
              {obj.description}
            
          
      ;
    // A simple UI with a toolbar, and content below it.
        return (
          
            
              
              Task
              
              
            
              {content}
        )
  }
}

TaskItem.js:

 
import React, {
  Component
} from 'react';
import {
  View,
  Text
} from 'react-native';
import styles from '../../styles/baseStyles.js';
import TaskService from './TaskService';

class TaskItem extends Component {
  render() {
    let obj = this.props.obj != null ? this.props.obj : TaskService.find(this.props.id);
    return (
      
        {obj.description}
      
    );
  }
}

module.exports = TaskItem;

TaskList.js:

 
import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon, InputGroup, Input } from 'native-base';
import {
  Text,
  View,
  ListView,
  RefreshControl,
  TouchableHighlight
} from 'react-native';
import styles from '../../styles/baseStyles.js';

import TaskSave from './TaskSave';
import TaskDetail from './TaskDetail';
import TaskService from './TaskService';

import TaskItem from './TaskItem';

export default class TaskList extends Component {

  constructor(props) {
    super(props);

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
          dataSource: ds.cloneWithRows([
            {description: 'initial'}
          ]),
          search: "",
          refreshing: false,
        };
  }

  showItem(obj){
      this.props.navigator.push({
        component: TaskDetail,
        callbackUpdateList: this.callbackUpdateList,
        obj: obj
      });

  }

  componentWillMount(){
    this.updateList();
  }

  render() {
    return (
      
               
                 
                   Tasks
                   
               

               
                 
                       
                        {
                           this.state.search = text;
                           console.log(this.state.search);
                           this.updateList();
                          }}
                          placeholder="Search" />
                   
                
                }/>
               
           
    );
  }

  updateList(){
    this.setState({refreshing: true});
    var all = TaskService.search(this.state.search);
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(all)
    });
    this.setState({refreshing: false});
  }

  openSave() {
     this.props.navigator.push({
       component: TaskSave,
       callbackUpdateList: this.callbackUpdateList,
     });
 }

  _onActionSelected = (position) => {
    console.log(position);
    if(position == 0){
      this.props.navigator.push({
        component: TaskSave,
        callbackUpdateList: this.callbackUpdateList,
      });
    }
  };

  callbackUpdateList = () => {
    console.log('callbackUpdateList');
    this.updateList();
  }



  _renderItem(obj) {
    if(obj == null){
      return null;
    }
    return (
      this.showItem(obj)}>
        
          
        
     
    );
  }
}

TaskSave.js:

 
'use strict';
import {
  TouchableHighlight, Text, ToastAndroid
} from 'react-native';
import { Container, Content, List, ListItem, Header, Title, InputGroup, Input, Icon, Picker, Button, Spinner } from 'native-base';

import styles from '../../styles/baseStyles.js';
import React, {Component} from 'react';
import TaskService from './TaskService';
import TaskDetail from './TaskDetail';

export default class TaskSave extends Component {
  constructor(props) {
    super(props);

    let editObj = this.props.route.editObj;
    let editIsNotNull = editObj != null;
    this.state = {
      // used to display a progress indicator if waiting for a network response.
      loading: false,
      id: editIsNotNull ? editObj.id : null,
      description: editIsNotNull ? editObj.description : ''
      }
  }

  save() {
    this.setState({
      loading: true
    });
   var hasError = false;
    if(this.state.description === ''){
      ToastAndroid.show('Description is required', ToastAndroid.LONG);
      hasError = true;
    }

    if(hasError){
      this.setState({
        loading: false
      });
      return;
    }

    var cond = {
        id: this.state.id != null ? this.state.id : new Date().getTime(),
        description: this.state.description
      };
    var saved = TaskService.save(cond);

    ToastAndroid.show('Saved!', ToastAndroid.LONG);

    this.props.route.callbackUpdateList();
    if(this.state.id == null){
      this.props.navigator.replace({
        component: TaskDetail,
        callbackUpdateList: this.props.route.callbackUpdateList,
        obj: saved
      });
    }else{
      this.props.navigator.pop();
    }

  }
  back = () => {
    this.props.navigator.pop();
  }

  render() {
      const content = this.state.loading ?    :

      
          
             
                 
                                this.setState({description: text})}
                                 value={this.state.description}
                                 stackedLabel label="Description"
                               autoFocus={true}/>
                           
                       



                   
                 ;

      return (
        
          
            
            {this.state.id == null ? "New task" : "Update task" }
          
            {content}
      )
  }
}

TaskService.js:

 
import RealmSchemas from '../../realm/RealmSchemas';

let TaskService = {

  save: function(obj) {
    var saved = null;
    console.log('save(): ' + obj);
    RealmSchemas.write(() => {
      saved = RealmSchemas.create('Task', obj, true);
    })
    return saved;
  },

  delete: function(obj) {
    console.log('delete(): ' + obj);
    RealmSchemas.write(() => {
      RealmSchemas.delete(obj);
    })
  },

  search: function(query) {
      let list = RealmSchemas.objects('Task');
      if(query != ''){
        return list.filtered('description CONTAINS "'+ query +'" ')
      }
      return list;
    },

  findAll: function() {
      return RealmSchemas.objects('Task');
    },

  find: function(id){
    let list = RealmSchemas.objects('Task');
    return list.filtered('id == '+ id +' ')[0];
  }

};

module.exports = TaskService;

index.android.js:

 
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

 import React, { Component } from 'react';
 import {
   AppRegistry,
   StyleSheet,
   Navigator,
   Text,
   View,
   ToolbarAndroid,
   ActivityIndicator,
   BackAndroid
 } from 'react-native';

 import TaskList from './src/pages/task/TaskList';

 var _navigator;

 /*
   Android hardware back button. Without this, android device back button prese
   will close the app directly if you are on settings screeb without going back to
   home.
  */
 BackAndroid.addEventListener('hardwareBackPress', () => {
   if (_navigator && _navigator.getCurrentRoutes().length > 1) {
     _navigator.pop();
     return true;
   }
   return false;
 });

export default class ReactNativeRealmNativeBaseCRUD extends Component {

  render() {
    return (


       {
          return Navigator.SceneConfigs.FloatFromRight;
        }}
        renderScene={(route, navigator) => {
          _navigator = navigator;
          if(route.component){
            // Pass the navigator the the component so it can navigate as well.
            return React.createElement(route.component, {navigator,route});
          }
      }} />
    );
  }
}



AppRegistry.registerComponent('ReactNativeRealmNativeBaseCRUD', () => ReactNativeRealmNativeBaseCRUD);

and run :D