mcnamee / react-native-starter-kit Goto Github PK

If you use gesture to open the menu, clicks on menuItems renders the page with the menu still open.

When I unlock the device orientation and allow the device to go landscape mode, the app only fills the left half the screen, the rest is blank. How do I fix this?

Also, maybe related, when I rotate the screen so it goes back to portrait view, sometimes it shows a unrotated portrait mode.

See below for examples screen shots.

By the way, I have found this app very useful. Thank you.

It would be handy to document or automate the renaming of the starterkit, we wouldn't want multiple versions of "Starter-Kit" ending up on the app Stores" ;)

I'm trying to get where the name makes sense so I can write a script that automates it, this is how far I've come:

1. Rename the value of the name property in ./Package.json.
2. Run react-native upgrade.
3. Run react-native link.
4. Remove Starter-kit source files:
   1. The iOS project files: rm -rf ios/StarterKit*
   2. The Android project source files: rm -rf android/app/src/main/java/com/starterkit/
5. Change name of component in the AppRegistry.registerComponent-call for iOS.

But fonts don't work and stuff breaks left and right.

I've also tried following this answer without success: http://stackoverflow.com/questions/33370175/how-do-i-completely-rename-an-xcode-project-i-e-inclusive-of-folders

Do you know what's needed to rename the app completely?

Hello @mcnamee,

First i want to thank you for this great starter app. I had implement everything correctly and i was able to run and modify many things, then i added a new container inside containers folder like so:
--containers
--abscence
--AbscenceContainer.js
--Container1View.js
Here when calling this.props.user i got undefined and i didn't get it why. Here are the attached files i added.
-------------------AbscenceContainer.js----------------------------
`/**

• Launch Screen Container
• React Native Starter App
• https://github.com/mcnamee/react-native-starter-app
  */
  import { connect } from 'react-redux';

// Actions
import * as RecipeActions from '@redux/recipes/actions';
import * as UserActions from '@redux/user/actions';

// The component we're mapping to
import AbscenceRender from './AbscenceView';

// What data from the store shall we send to the component?
const mapStateToProps = state => ({
user: state.user,
});

// Any actions to map to the component?
const mapDispatchToProps = {
absence: RecipeActions.getAbscencesAll,
};

export default connect(mapStateToProps, mapDispatchToProps)(AbscenceRender);`

---------------------AbscenceView.js----------------------------

`/**

• Launch Screen
• • Shows a nice loading screen whilst:
• • Checking if user is logged in, and redirects from there
• React Native Starter App
• https://github.com/mcnamee/react-native-starter-app
  */
  import React, { Component, PropTypes } from 'react';
  import {
  View,
  ListView,
  Image,
  StatusBar,
  StyleSheet,
  ActivityIndicator,
  } from 'react-native';
  import { Actions } from 'react-native-router-flux';
  import AppAPI from '@lib/api';
  // Consts and Libs
  import { AppStyles, AppSizes } from '@theme/';

/* Styles ==================================================================== */
const styles = StyleSheet.create({
launchImage: {
width: AppSizes.screen.width,
height: AppSizes.screen.height,
},
});

/* Component ==================================================================== */
class AbscenceView extends Component {
static componentName = 'AbscenceView';

static propTypes = {
getAbscencesAll: PropTypes.func.isRequired,
}

constructor(props) {
super(props);

this.state = {
  loading: true,
  visitedRoutes: [],
  isRefreshing: true,
  dataSource: new ListView.DataSource({
    rowHasChanged: (row1, row2) => row1 !== row2,
  })
};

}

componentDidMount = () => {
console.log('user token '+this.props.user.token);//this is where i get the error
// Show status bar on app launch
// StatusBar.setHidden(false, true);

// Try to authenticate based on existing token
/*this.props.login()
  // Logged in, show index screen
  .then(() => Actions.app({ type: 'reset' }))
  // Not Logged in, show Login screen
  .catch(() => Actions.authenticate({ type: 'reset' }));
  params,body

}*/
}
render(){

return (<View style={[AppStyles.container]}>

    <ActivityIndicator
      animating
      size={'large'}
      color={'#C1C5C8'}
    />

</View>

)
};
}

/* Export Component ==================================================================== */
export default AbscenceView;
`

Thank ou in advance

I seem to be having some difficulty with requiring only one side menu per app instead of having the same side menu implemented on every page that the menu can navigate to - much like keeping one tabbar per app where you can navigate to the different tab pages

right now, my home.js component - the first page to have the side menu, looks like this (i took the toggle implementation you used to make the menu work with MenuButton):

var React = require('react-native');
var {
    View, 
    Image,
    StyleSheet,
    Text, 
    ListView, 
    TouchableHighlight, 
    AsyncStorage, 
} = React;

//additional libraries
var Parse = require('parse/react-native');
var EventEmitter = require('EventEmitter');
var Spinner = require('react-native-spinkit');
var SideMenu = require('react-native-side-menu');
var Subscribable = require('Subscribable');

//dynamic component references + libraries 
var ArticlePreview = require('./exp_base_components/article-preview');
var Api = require('../utils/api');
var FeedStore = require('../stores/feed-store');
var ArticleDetails = require('./exp_base_components/article-details');
var Menu = require('./menu');
var MenuButton = require('../common/menuButton');

//dimensions
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');

module.exports = React.createClass({ 
    //mixins are for menu functionality taken from 
    //here: https://github.com/mcnamee/react-native-starter-app
    mixins: [Subscribable.Mixin],
    componentWillMount: function() {
        this.eventEmitter = new EventEmitter();
        Parse.User.currentAsync()
            .then((user) => { this.setState({user: user}); })
    },  
    //on first login (and all new logins)
    //need to pull onboarding keywords that indicate user interests
    //so that we can pull the appropiate feeds 
    componentDidMount: function() {
        //console.log(this.state.user);
        var personalFeed = null; 
        var Onboarding = Parse.Object.extend("Onboarding");
        var query = new Parse.Query(Onboarding);
        query.equalTo("userObjectId", Parse.User.current());
        var that = this;
        query.find({
          success: function(result) {
            console.log("Successfully retrieved " + result.length + " users!");
            var object = result[0];
            console.log(object.id);
            // Do something with the returned Parse.Object values
            console.log(object.get('interests'));
            that.fetchData(object.get('interests'));
          },
          error: function(error) {
            console.log("Error: " + error.code + " " + error.message);
          }
        });

    },
    //states of this components 
    getInitialState: function() {
        return {
            user: null, 
            personalFeed: null, 
            touchToClose: true,
            disableGestures: false,
            isLoaded: false, 
            dataSource: new ListView.DataSource({
               rowHasChanged: (row1, row2) => row1 !== row2,
            }), 
        }
    },
    //part of menu button functionality 
    navigate: function(title, link) {
      this.refs.rootSidebarMenu.closeMenu();

      this.refs.rootNavigator.replace({
        title: title,
        component: link,
      });
    },
    //gettign data for rss feed based on user interests 
    fetchData: function(personalFeed) {
        var that = this; 
        FeedStore.getArticles(personalFeed)
            .then((data) => {
                var entries = data; 
                that.setState({
                    dataSource : that.state.dataSource.cloneWithRows(entries),
                    isLoaded   : true, 
                });
            }).done();
    }, 
    //rendering component 
    render: function() {

        if (!this.state.isLoaded) {
            return this.renderLoadingView();
        }
        return <SideMenu 
                    menu={<Menu events={this.eventEmitter} navigate={this.navigate} />}
                    touchToClose={this.state.touchToClose}
                    disableGestures={this.state.disableGestures}
                    toleranceX={0}
                    edgeHitWidth={window.width/5}
                    openMenuOffset={window.width/5}>
                <View style={styles.container}>
                    {this.renderListView()}
                </View>
                <MenuButton 
                    selected={this.state.enoughSelections}
                    source={require('../img/menu-btn.png')}
                    resize={'contain'}
                    onPress={this.onMenuPress} />
            </SideMenu>
    },
    //menu press function 
    onMenuPress: function() {
        this.eventEmitter.emit('toggleMenu');
    }, 
    //loading render
    renderLoadingView: function() {
        return (
            <View style={styles.container}>
                <Spinner style={styles.spinner} isVisible={!this.state.isLoaded} size={50} type={'Arc'} color={'#FF0000'}/>
            </View>
        );
    }, 
    //rendering list view
    renderListView: function() {
        return (
                <ListView
                    dataSource = {this.state.dataSource}
                    initialListSize = {5}
                    pageSize={5}
                    renderRow  = {this.renderEntry} />
        );
    }, 
    //rendering rows within list view
    renderEntry: function(entry) {

        if (typeof entry.mediaGroups === 'undefined')
        {
            return (
                <ArticlePreview
                    category={entry.categories[0]}
                    key={entry.title}
                    heartText={'2.9k'}
                    categoryPress={this.onCategoryDetailsPress}
                    selected={false}
                    source={require('../img/stock_image.png')}
                    text={entry.title.toLowerCase().replace('&nbsp;','')}
                    onPress={() => this.onArticleDetailsPress(entry)} />
            );
        } else 
        { 
            var url = entry.mediaGroups[0].contents[0].url; 
            if (url.indexOf('w=150') > -1)
            {
                url.replace("w=150", "w=500");
            }
            var catsource = entry.categories[0]; 
            if (typeof catsource == "undefined")
            {
                catsource = "News";
            }
            return (
                <ArticlePreview
                    category={catsource}
                    key={entry.title}
                    heartText={'2.9k'}
                    categoryPress={this.onCategoryDetailsPress}
                    selected={false}
                    source={{uri: url }}
                    text={entry.title.toLowerCase().replace('&nbsp;','')}
                    onPress={() => this.onArticleDetailsPress(entry)} />
            );
        }

    },
    //pressing category button to go to feed of that category 
    onCategoryDetailsPress: function() {
        //forward to sytled web view of categorical article feed
        console.log("onCategoryDetailsPress"); 
    }, 
    //press to see article's details 
    onArticleDetailsPress: function(entry) {
        //forward to sytled web view of article details given link
        console.log("onArticleDetailsPress"); 
        console.log(entry);

        //asynchronously store entry

        //pushing to new component
        this.props.navigator.push({
            name: 'articledetails',
            passProps: {entry: entry},
        });
    }, 
    /*
    onChange: function(event, articles) {
        this.setState({articles: articles}); //trigers re-render of component
    }
    */

});

The problem is that i can navigate to the other pages because the Menu component referenced in the SideMenu does not have Navigator as a part of it - so pushing to the next page is meaningless to it. Is there a better way to implement this? I can give you access to the repo if needed.

Getting the following errors

C:\Users\Personal\Documents\Projects\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_icon_dark.xml:5:27-80 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_icon_dark_disabled').
C:\Users\Personal\Documents\Projects\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_icon_light.xml:5:27-81 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_icon_light_disabled').
C:\Users\Personal\Documents\Projects\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_icon_light.xml:8:27-80 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_icon_light_pressed').
C:\Users\Personal\Documents\Projects\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_text_dark.xml:7:27-80 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_text_dark_disabled').
C:\Users\Personal\Documents\Projects\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_text_light.xml:5:27-81 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_text_light_disabled').
C:\Users\Personal\Documents\Projects\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_text_light.xml:8:27-80 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_text_light_pressed').

Sorry, maybe for a dummy question.
How to unlock orientation change? Im trying it on XCode emulator - and it's not changing (default Awesome project does).

Thx anyway! Great starter!

I can´t run in adroid:

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':react-native-google-analytics-bridge:processReleaseResources'.

com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command 'C:\Android\android-sdk\build-tools\23.0.1\aapt.exe'' finished with non-zero exit value 1

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

Some help? :(

Is there a easy way to achieve scrollable tabs? Currently it is trying to fit every tabs in same view.

I have a need to create something like below:

:react-native-device-info:processReleaseResourcesC:\Users\lfarfan\Desktop\projects\ReactNative\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_icon_dark.xml:5:27-80 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_icon_dark_disabled').
C:\Users\lfarfan\Desktop\projects\ReactNative\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_icon_dark.xml:8:27-79 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_icon_dark_pressed').
C:\Users\lfarfan\Desktop\projects\ReactNative\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_icon_dark.xml:13:27-78 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_icon_dark_normal').
C:\Users\lfarfan\Desktop\projects\ReactNative\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_icon_dark_focused.xml:14:29-80 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_icon_dark_normal').
C:\Users\lfarfan\Desktop\projects\ReactNative\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_icon_light.xml:5:27-81 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_icon_light_disabled').
C:\Users\lfarfan\Desktop\projects\ReactNative\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_icon_light.xml:8:27-80 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_icon_light_pressed').
C:\Users\lfarfan\Desktop\projects\ReactNative\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_icon_light.xml:13:27-79 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_icon_light_normal').
C:\Users\lfarfan\Desktop\projects\ReactNative\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_icon_light_focused.xml:14:29-81 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_icon_light_normal').
C:\Users\lfarfan\Desktop\projects\ReactNative\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_text_dark.xml:7:27-80 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_text_dark_disabled').
C:\Users\lfarfan\Desktop\projects\ReactNative\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_text_dark.xml:10:27-79 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_text_dark_pressed').
C:\Users\lfarfan\Desktop\projects\ReactNative\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_text_dark.xml:15:27-78 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_text_dark_normal').
C:\Users\lfarfan\Desktop\projects\ReactNative\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_text_dark_focused.xml:14:29-80 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_text_dark_normal').
C:\Users\lfarfan\Desktop\projects\ReactNative\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_text_light.xml:5:27-81 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_text_light_disabled').
C:\Users\lfarfan\Desktop\projects\ReactNative\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_text_light.xml:8:27-80 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_text_light_pressed').
C:\Users\lfarfan\Desktop\projects\ReactNative\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_text_light.xml:13:27-79 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_text_light_normal').
C:\Users\lfarfan\Desktop\projects\ReactNative\react-native-starter-app\node_modules\react-native-device-info\android\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\10.0.1\res\drawable\common_google_signin_btn_text_light_focused.xml:14:29-81 : No resource found that matches the given name (at 'drawable' with value '@drawable/common_google_signin_btn_text_light_normal').

FAILED

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':react-native-device-info:processReleaseResources'.

com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command 'C:\Users\lfarfan\AppData\Local\Android\sdk\build-tools\23.0.1\aapt.exe'' finished with non-zero exit value 1

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 1 mins 54.606 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

(node:11424) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: Cannot read property 'message' of undefined
(node:11424) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Just cloned and ran npm install ... I am getting this error. Node/npm version v5.5.0 3.3.12. Any idea what might be going on?

* What went wrong:
A problem occurred configuring project ':app'.
> A problem occurred configuring project ':react-native-google-analytics-bridge'.
   > Could not resolve all dependencies for configuration ':react-native-google-analytics-bridge:_debugCompile'.
      > Could not find any matches for com.google.android.gms:play-services-analytics:+ as no versions of com.google.android.gms:play-services-analytics are available.
        Searched in the following locations:
            file:/Users/nbhattarai/.m2/repository/com/google/android/gms/play-services-analytics/maven-metadata.xml
            file:/Users/nbhattarai/.m2/repository/com/google/android/gms/play-services-analytics/
            https://jcenter.bintray.com/com/google/android/gms/play-services-analytics/maven-metadata.xml
            https://jcenter.bintray.com/com/google/android/gms/play-services-analytics/
            file:/Users/nbhattarai/source/kaslejityo/app/node_modules/react-native/android/com/google/android/gms/play-services-analytics/maven-metadata.xml
            file:/Users/nbhattarai/source/kaslejityo/app/node_modules/react-native/android/com/google/android/gms/play-services-analytics/
            file:/usr/local/Cellar/android-sdk/23.0.2/extras/android/m2repository/com/google/android/gms/play-services-analytics/maven-metadata.xml
            file:/usr/local/Cellar/android-sdk/23.0.2/extras/android/m2repository/com/google/android/gms/play-services-analytics/
        Required by:
            StarterKit:react-native-google-analytics-bridge:unspecified

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

Google analytics link inside navigation README points to a non existent Github page.

Here's what I'm seeing after run react-native run-android:
build file 'D:\react-native-starter-app\android\app\build.gradle': 3: unable to resolve class com.android.build.OutputFile
@ line 3, column 1.
import com.android.build.OutputFile
^

1 error

Only thing missing is some form of authentication. I created a derivative of this and added Firebase Authentication https://github.com/vincent-winly/ReactNativeBoilerplate

Thanks for the app and keep up the good work!

I just tried newest release of the project and both in ios simulator and on android device demo app is really slow.

Slow loading, rendering of images and transitions are laggy.

Any suggestions on how to make it faster?

I have an app based on your react-native-starter-app. It has a JavaScript alert in one of the webviews. It works in IOS but not android. I have changed the proguard-rule.pro file as follows

class:
-keepclassmembers class fqcn.of.javascript.interface.for.webview {
public android.webkit.WebView, startActivity, android.webkit.WebChromeClient, android.webkit.JsResult;
}
and done a react-native run-android but the alert is still not working in the android app. How do I do this, and what are the fully qualified class name to the JavaScript Interface. I am pretty sure I have not modified the Javascript interface in my version of the app.

This is a good project, I will recommend this project in my blog
Website:http://www.lcode.org/react-native-week-issue18/

Some test failed.

Test Suites: 7 failed, 23 passed, 30 total
Tests:       16 failed, 46 passed, 62 total
Snapshots:   16 failed, 27 passed, 43 total
Time:        7.985s

Example error:

LoginView renders correctly

    expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -268,10 +268,11 @@
                     "marginLeft": 0,
                     "marginRight": 0,
                     "padding": 12,
                   },
                   undefined,
    +              undefined,
                 ]
               }>
               <Text
                 accessible={true}
                 allowFontScaling={true}
    @@ -481,10 +482,11 @@
                     "marginLeft": 0,
                     "marginRight": 0,
                     "padding": 12,
                   },
                   undefined,
    +              undefined,
                 ]
               }>
               <Text
                 accessible={true}
                 allowFontScaling={true}
      
      at Object.<anonymous> (src/containers/__tests__/views/login-view-test.js:19:14)

Hi,
I checked this starter app is really cool and i am new to react native. In this app really helpful for me to learn react native. I already worked on ionic framework in firebase integration is really simple but in react native redux strcture i can't figure out firebase integration. If you integrate firebase, then it would be really helpful for me. I can sure about that lot of them looking best way of integrating firebase into react native because out there to find a way to efficient integration of firebase in react native redux is not a simple task.
I am really looking for you guys. Thanks for the app.

I loaded it on my iOS simulator and it takes multiple seconds to switch screens?

Cannot read property 'on' of undefined TypeError: Cannot read property 'on' of undefined at Client.connect (/Users/BoBo/React Native/react-native-starter-app/node_modules/.1.9.0@fb-watchman/index.js:184:14) at Client.command (/Users/BoBo/React Native/react-native-starter-app/node_modules/.1.9.0@fb-watchman/index.js:228:12) at Client.capabilityCheck (/Users/BoBo/React Native/react-native-starter-app/node_modules/.1.9.0@fb-watchman/index.js:290:8) at WatchmanWatcher.init (/Users/BoBo/React Native/react-native-starter-app/node_modules/.1.4.1@sane/src/watchman_watcher.js:173:15) at new WatchmanWatcher (/Users/BoBo/React Native/react-native-starter-app/node_modules/.1.4.1@sane/src/watchman_watcher.js:40:8) at createWatcher (/Users/BoBo/React Native/react-native-starter-app/node_modules/.17.0.3@jest-haste-map/build/index.js:536:23) at Array.map (native) at HasteMap._watch (/Users/BoBo/React Native/react-native-starter-app/node_modules/.17.0.3@jest-haste-map/build/index.js:654:44) at _buildPromise._buildFileMap.then.then.hasteMap (/Users/BoBo/React Native/react-native-starter-app/node_modules/.17.0.3@jest-haste-map/build/index.js:250:21) at process._tickCallback (internal/process/next_tick.js:103:7) ~

Something wrong?

I've tried to set a background image using:

<Image source={backgroundImage} style={styles.backgroundImage}>
     <View>
    </View>
</Image>

styles = StyleSheet.create({
    backgroundImage: {
        flex: 1,
        width: undefined,
        height: undefined,
        backgroundColor: 'transparent',
    }
})

But the menu is very slow. I need to set the background image to all the application.

I've cloned the project today after running a fresh npm install, then ran to open the app on emulator:

react-native run-android

But got an error telling that Error: Cannot find module './packager/babelRegisterOnly'
Any ideas what's going on there? Don't see any similar issues open matching the error. Thanks

Full error:

$ react-native run-android

module.js:327
    throw err;
    ^

Error: Cannot find module './packager/babelRegisterOnly'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\Users\Brian\Documents\Visual Studio 2013\Projects\react-native-starter-app\node_modules\react-native\cli.js:11:1)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)

Add support for a login/signup page that does not have the sidemenu / navbar. Conditional check before proceeding to navbar/sidemenu.

I'm new to react and react native, this is a great starter. Thanks!

Hi,

Thanks for developing this starter app, it's really helpful!

I'm trying to rename the app and I keep getting the following error:

react-native-rename MyAppName The app_name value in ./android/app/src/main/res/values/strings.xml must be the same with ./ios/AppFolderName before renaming the app. ex. ./ios/CoolApp ---> <string name="app_name">CoolApp</string> and try running the command again with you new app name. ex. react-native-rename "Awesome App" If your're using Windows OS, please run this command using Git Bash or Cygwin or other equivalent that runs Linux commands.

Any help would be greatly appreciated.

This really isn't an issue but the request. When it comes to CSS I am like:

Is there a quick way to convert the following listView to 2 or 3 column grid view?

I turned off JWT Auth in /lib/api.js.
How to use the favourites feature?

Hi,

Right now, your dependency chain is broken.

npm WARN [email protected] requires a peer of [email protected] but none was installed.

I have no idea why this is failing but it happens right after I cloned your updated project and ran npm install.

hey guys i am trying to add button on right side of the navbar but encountering an error

here is the code snippet of containers/app.js

renderScene = (route, navigator) => {
    // Show Hamburger Icon when index is 0, and Back Arrow Icon when index is > 0
   let leftButton = {
      onPress: (route.index > 0)
        ? this.refs.rootNavigator.pop
        : this.props.toggleSideMenu,
      icon: (route.index > 0)
        ? 'md-arrow-back'
        : 'md-menu'
    };

    let rightButton = {
      icon: (route.index > 0)
      ? 'md-search'
      : 'md-search'
    };

here is the return method where it has been called

<NavigationBar
          title={<NavbarElements.Title title={route.title || null} />}
          statusBar={{style: 'light-content', hidden: false}}
          style={[AppStyles.navbar]}
          tintColor={AppConfig.primaryColor}
          leftButton={<NavbarElements.LeftButton onPress={leftButton.onPress} icon={leftButton.icon} />}
          rightButton={<NavbarElements.rightButton icon={rightButton.icon} />} />

And finally here is the components/navbar.elements.js

class NavbarRightButton extends Component {
  static propTypes = {
    onPress: React.PropTypes.func.isRequired,
    icon: React.PropTypes.string.isRequired,
  }

  render = () => {
    return (
      <TouchableOpacity activeOpacity={0.7}
        style={styles.navbarRightButton}
        hitSlop={{top: 7, right: 7, bottom: 7, left: 7}}>
        <Icon name={this.props.icon} size={36} color={"#FFF"} />
      </TouchableOpacity>
    );
  }
}

exports.RightButton = NavbarRightButton;

And here is the console snap which shows the error

In the description of this app, you call it a starter app and as boilerplate. Both these terms imply to me that you intend for people to freely use your software as a basis for their own apps. However, you have not included a licence agreement in your repository. As github explains here, if you do not choose a licence, then it considerably restricts what people can do with your code. If you really do intend for other people to freely use your code I have drafted an MIT licence below for you. I can also do a pull request to include this licence in your repository.

If you actually do not want people to use your code as a starter app, then I suggest that you include an appropriate explicit licence, as many people are not aware of the implications of a lack of licence in a github open source repository.

licence.txt

i cloned the repo, ran npm install in the folder consenting the source, launched Xcode and tried to launch the app. I received the following error: [Screen shot of the emulator has been attached.

2017-01-20 21:10:44.060 [info][tid:main][RCTBatchedBridge.m:72] Initializing <RCTBatchedBridge: 0x608000196240> (parent: <RCTBridge: 0x6080000b95c0>, executor: RCTJSCExecutor)
objc[47790]: Class PLBuildVersion is implemented in both /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/AssetsLibraryServices.framework/AssetsLibraryServices (0x123b69998) and /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/PhotoLibraryServices.framework/PhotoLibraryServices (0x12398b880). One of the two will be used. Which one is undefined.
2017-01-20 21:10:44.999 [error][tid:com.facebook.react.JavaScript] View has no propType for native prop RCTView.aspectRatio of native type float
If you haven't changed this prop yourself, this usually means that your versions of the native code and JavaScript code are out of sync. Updating both should make this error go away.
2017-01-20 21:10:45.005 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: View has no propType for native prop RCTView.aspectRatio of native type float
If you haven't changed this prop yourself, this usually means that your versions of the native code and JavaScript code are out of sync. Updating both should make this error go away.
2017-01-20 21:10:45.494 [info][tid:main][RCTRootView.m:249] Running application StarterKit ({
initialProps = {
};
rootTag = 1;
})

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Navigator.
on both ios and android

Hi there!

Great work on this starter app!

I was wondering if there's any way I can hide the navigation bar ?
For example, using this, when navigation to the forms screen, is there a way to hide the NavigationBar ?

Thanks!

Unhandled JS Exception: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of TabViewPage.

Hi @mcnamee I am getting similar error when i try to use tabs.js

Getting this error on brand new installation.

Can you please push an extra module that involves using back button. If no, can you help me understand how it is to be done. I will try and when working fine will send a PR.

This error comes up from your repo after cloning and following install instructions:

Hi I'm trying to run the example, after I ran npm install and opened the xcode project, I get an error when I start the simulator. After checking the console I found the error:

"ExceptionsManager.js:78 Warning: Native component for "RCCToolBar" does not exist

Is there something I missed when installing the module?

Great work!
Do you have any plan to implement sagas on your current repo?
If all api calls are performed through sagas, it will be perfect.

Are you planning on adding webpack and android support? Right now this is only for iOS and I was looking around at some other projects and this one is sooooo close to what I want, just lacking examples for implementing this on android and web. If it's not in the roadmap for you I might take this on for you... but wanted to check on your thoughts first. It'd probably borrow from the architecture in this project: https://github.com/benoitvallon/react-native-nw-react-calculator

Hi @mcnamee, Running the react-native-starter-app it fails in my environment with the error:

:react-native-device-info:processReleaseResources FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':react-native-device-info:processReleaseResources'.
> com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command 'C:\Users\Brian\AppData\Local\Android\sdk\build-tools\23.0.1\aapt.exe'' finished with non-zero exit value 1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED

Is there a way to get a more detailed stack trace using the react-native run-android command? At the moment this error doesn't give enough detail as to what's up.

Thanks

Hello, thanks for putting this together. Its a great learning resource for someone starting out with react native and wanting to build a full fledged app.

I tried upgrading to 0.20 and got into a few issues. Mainly this one:
babelHelpers.objectDestructuringEmpty is not a function

Any tips on whats the best way to upgrade to the latest react-native version?

Hi nice project by the way,

I've just started using it and its really awesome! I've added jest testing to my project and I'm just wondering would you like me to make a pull request which implements jest testing within this project?

I attempted meshing your menu (brilliant by the way!) into my application but seem to be encountering a particularly persistent error. The error is the following:

My code (where I have determined the error may be coming from) is the following:

var React = require('react-native');
var {
    View, 
    Image,
    StyleSheet,
    Text, 
    Navigator, 
    Component,
} = React;

//additional libraries
var Parse = require('parse/react-native');
var FBSDKCore = require('react-native-fbsdkcore');
var {
  FBSDKGraphRequest,
  FBSDKGraphRequestManager, 
} = FBSDKCore;
var NavigationBar = require('react-native-navbar');
var SideMenu = require('react-native-side-menu');

//dimensions
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');

//dynamic variables /components
var Icons = require('./menu/icons.ios');
var Menu = require('./menu/menu.ios');
var Index = require('./menu/tabbar.ios');
var AppStyles = require('./menu/styles.ios');
var Subscribable = require('Subscribable');
var EventEmitter = require('EventEmitter');

//custom title component 
class CustomTitle extends React.Component {
    render() {
      return (
        <Text style={[AppStyles.baseText, AppStyles.strong, AppStyles.navbar_title]}>{this.props.title}</Text>
      );
    }
}

module.exports = React.createClass({
    mixins: [Subscribable.Mixin],
    componentWillMount: function() {
        this.eventEmitter = new EventEmitter();
        Parse.User.currentAsync()
            .then((user) => { this.setState({user: user}); })
    }, 
    getInitialState: function() {
        return {
            user: null, 
            username: null, 
            touchToClose: true,
            disableGestures: false,
        };
    },
    //gender custom navbar 
    renderScene: function(route, navigator) {
      var Component = route.component;
      var navBar = route.navigationBar;

      // Icons
      var MenuIcon = Icons.MenuIcon;
      var BackIcon = Icons.BackIcon;

      // Navbar Setup
      if (navBar) {
        navBar = React.addons.cloneWithProps(navBar, {
          navigator: navigator,
          route: route
        });
      }

      // Default Navbar Title
      var title = 'Starter App';
      if(route.title != undefined) {
        title = route.title;
      }

      // Determine which Icon component - hamburger or back?
      var customPrev = <MenuIcon leftButtonPress={this.onLeftButtonPress} />;
      if (route.index > 0){
        var customPrev = <BackIcon leftButtonPress={this.onLeftBackButtonPress} />;
      }

      // Done
      return (
        <View style={AppStyles.container}>
          <NavigationBar
            title={title}
            style={AppStyles.navbar}
            customPrev={customPrev}
            customTitle={<CustomTitle title={title} />} />

          <Component navigator={navigator} route={route} />
        </View>
      );
    },
    render: function() {
        if (!this.state.user)
        {
            return <Text style={styles.label}>Loading...</Text>
        } else 
        {
            var username = this.state.user.get('username');
            console.log(this.state.username);
        }

        return (
            <SideMenu
              ref="rootSidebarMenu"
              menu={<Menu events={this.eventEmitter} navigate={this.navigate} />}
              touchToClose={this.state.touchToClose}
              disableGestures={this.state.disableGestures}>

                <Navigator
                ref="rootNavigator"
                style={[AppStyles.container, AppStyles.appContainer]}
                renderScene={this.renderScene}
                initialRoute={{
                  component: Index,
                  index: 0,
                }} />

            </SideMenu>
        );
    }, 
    //when back button from navbar is clicked 
    onLeftBackButtonPress: function(navigator) {
      this.refs.rootNavigator.pop();
    },
    //navigates to page from menu
    onLeftButtonPress: function() {
      this.eventEmitter.emit('toggleMenu');
    },
    //navigates to page from menu
    navigate: function(title, link) {
      this.refs.rootSidebarMenu.closeMenu();

      this.refs.rootNavigator.replace({
        title: title,
        component: link,
      });
    },
});

styles = StyleSheet.create({
});

Maybe it is dumb question but how can I hide the navbar ? I try to remove it but that gives me an error.

There is no background on the first screen on iOS.

The following error shows up:
'setBackgroundColor' is only available on Android

How can I fix this problem to show a proper background? In advance, thank you for sharing the code. I really like your project.

If I am make a standard master-detail application with multiple sets of master-detail records. How can I conditionally add a right-nav button with a "+" to load a detail view to create a new record?

menu can toggle in/out
but menu items are not showing up. only blank lines are showing.

although, i just run the app i didn't modify the content.

Hi Matt, I'm new on react. Thanks for this project.

Can you update to the latest version of React-native and the other packages?

I have done this myself and it's working on Android, but I'm new here and I don't know what I need to check.