How to define a route and then create a simple crosslink to that route?

This API is clear enough…

<Button
      title="Go to Details"
      onPress={() => this.props.navigation.navigate('Details')}
    />

But how do I register this “Details” route for a component? In the React Navigation docs, it is often suggested to do something like…

export default StackNavigator({
  Home: {
    screen: HomeScreen,
  },
});

However, the above code does not just register a route, it also affects how the UI is presented. I don’t want these coupled. I don’t want the way in which I register/define routes to have any immediate effect on the GUI.

There must be a way to simply register a route so that when I call navigation.navigate(‘SomeRoute’), the relevant screen will load.

Even the documentation for building a custom router seems to assume that I want to render something, rather than just define routes. But I just want to register a route so I can call navigation.navigate(‘Someroute’).

What is the standard approach to building cross-platform mobile libraries? [on hold]

I’m an Android developer looking to build out libraries that can be used across Android and iOS, but unsure what the “best” approach for this is.

Some libraries I’d like to build are:

  1. Exposing a REST API to both clients.
  2. Sharing a common set of data models.
  3. Reusable UI components for a consistent user experience.

I think React Native would be a good approach for the UI, but what is the generally accepted approach for building out shared logic across platforms? Is that something that can be done using React Native? Can libraries built through Xamarin be easily reusable across either platform? Ideally, I’d like to distribute these libraries through Gradle and CocoaPods as well.

How can I reopen a closed realm database after performing a backup?

I am using a realm database with react native. I have a file realm.js where I am defining my realm schema and the path where the database shall be stored:

import Realm from 'realm';
import RNFS from 'react-native-fs'

class Test extends Realm.Object {}
Test.schema = {
    name: 'Test',
    primaryKey: 'id',
    properties: {
        id: {type: 'string', optional: false},
        ...,
    },
};

export default new Realm({schema: [Test],
                          path: RNFS.DocumentDirectoryPath + "/t_db.realm"});

I am using this realm via import: import realm from './realm' and for example: this.query = realm.objects('Test').sorted('id');.

In my app I want to implement a backup function in which the realm db gets copied to the external user storage. Therefor I use React Native Filesystem with this function:

import realm from './realm'
import RNFS from 'react-native-fs'

backup() {
  console.log("path ", realm.path)
  realm.close()
  console.log("closed ", realm.isClosed)
  RNFS.copyFile(realm.path, RNFS.ExternalDirectoryPath + "/t_db.realm")
  console.log("copied")
  realm.open()
}

My console.logs suggest that I am successfully copying the database but I can not reopen it. Following error gets thrown at this point:

ReactNativeJS: undefined is not a function (evaluating ‘_realm2.default.open()’)

When I am trying to wait for the copy to be finished like so:

RNFS.copyFile(realm.path, RNFS.ExternalDirectoryPath + "/t_db.realm")
.then(() => {
  console.log("copied")
  realm.open()
})

I get the following error after console.log(“copied”):

ReactNativeJS: ‘Unhandled promise rejection’, { [TypeError: undefined is not a function (evaluating ‘_realm2.default.open()’)]

Can anyone help me how to resolve this?

How to combine a styles object with an inline style in React Native?

I am trying to combine an inline style transform: [{ rotate: '180deg'}] with an already existing styles object styles.buttonText without modifying the styles object. I have tried the following ways:

<Text style={{...styles.buttonText, transform: [{ rotate: '180deg'}]}}>^</Text>

and

<Text style={{...styles.buttonText, ...{transform: [{ rotate: '180deg'}]}}}>^</Text>

and

<Text style={Object.assign({}, styles.buttonText, {transform: [{ rotate: '180deg'}]})}>^</Text>

But I keep getting this same error message:

TypeError: In this environment the sources for assign MUST be an
object. This error is a performance optimization and not spec
compliant.

Does anyone know what is going on or how I can get this to work?

How to add additional data to a notification object in react-native-push-notification on ios?

Any idea how to add additional data to a notification object in react-native-push-notification on ios?

Currently I’m sending this as the body:

body = { aps: { alert: "Text that is sent in the notification.", sound: "default", badge: 1 } }.to_json

I can’t figure out how to add additional data that wouldn’t be shown in the notification alert such as a user id to redirect the user to the correct view if he clicks on the notification.

Is it possible to create a native layout using a React Native component [on hold]

I’m creating an alarm clock app using React Native. When the alarm goes off I start a new activity that has a custom snooze and off buttons. Currently I have to write the layout code for it in native code (xml). Is there a possibility that I can create the rendered component for the second activity with React Native?

Thanks in advance

Possibility of loading Google places images in react-native Image component?

I am trying to find a way to load image reference I get from places api into places photo API using Image component of react-native like below,

const imageLink = 'https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CmRaAAAAuZ36wzrMYCVNWM1smQkRKuQyXecPgRpcsMfrSqbJM0EUTXZ62j8Ljxtk8HsxohXbtAwZAwmj_F3HmDwLoQaH9qt2TZJhhA6EuXK41UFo0Ow750MJujtrr5hgHR2lF7EXEhCkWj_dZ4LefrYzLU1_5RF1GhTR7Ggem5IJ-v7V2U8fjKoU9tBUOg&key=--MyKey--'
return (
        <View >
            <TouchableHighlight >
                    <View>
                        <Image
                            style={{width:64, height:64,flex:1,backgroundColor:'red'}}
                            source={{uri: imageLink}}
                        />


                    </View>    
             </TouchableHighlight>
        </View>

    );

I am getting only empty placeholder with above code. However, I am able to load this link in browser.One caveat is that google places photo’s link is redirecting to some other url which then displays image in browser. Am I doing it right? or is there any other way I can accomplish the same. Note: I tried react-native-network-image library as well.

redux-form Cannot read property ‘any’ of undefined

I have problem with redux-from in react-native. I want to implement a login form for my app. from tutorials around the web I wrote this code but have problem with this error

Cannot read property ‘any’ of undefined

Error screenshot

Package.json

"dependencies": {
    "react": "16.2.0",
    "react-addons-update": "^15.6.2",
    "react-native": "0.53.0",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-form": "^5.3.2",
    "redux-persist": "^3.2.2"
  },

this is my Login.js component

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import { reduxForm } from "redux-form";

class Login extends Component {
    onSignIn() {
        var { email, password } = this.props.fields;
        console.log(email.value, password.value);
    }

    render(){
        var {fields: {email, password}} = this.props;
        return (
            <View style={styles.container}>
                <View style={styles.titleContainer} >
                    <Text style={styles.title} >ToDo</Text>
                </View>
                <View style={styles.fields} >
                    <TextInput
                        {...email}
                        placeholder="Email"
                        style={styles.TextInput}
                    />
                </View>
                <View style={styles.fields} >
                    <TextInput
                        {...password}
                        placeholder="Password"
                        style={styles.TextInput}
                    />
                </View>
                <View style={styles.buttonContainer} >
                    <TouchableOpacity>
                        <Text style={styles.button} onPress={this.onSignIn} >
                            Signin
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <Text style={styles.button}>
                            Signup
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    ...
});

var validate = (formProps) => {
    var errors = {};

    return errors;
}

export default reduxForm({
    form: 'login',
    fields: ['email', 'password'],
    validate: validate
}, null, null)(Login);

my reducer index.js

import update from "react-addons-update";
import { combineReducers } from "redux";
import { reducer as formReduser } from "redux-form";

module.exports = combineReducers({
    form: formReduser
})