lintonye / react-native-diary

Source code of a whole bunch of React Native apps that I built

Installation & Usage

bundle install
bundle exec jekyll serve

Publish to Github Pages

JEKYLL_ENV=production bundle exec rake site:publish

Thanks

This blog was forked from https://github.com/kippt/jekyll-incorporated. Originally built for sendtoinc.com, your workspace for sharing and organizing knowledge. Original template built by:

Karri Saarinen

• http://twitter.com/karrisaarinen
• http://github.com/ksaa

Jori Lallo

• http://twitter.com/jorilallo
• http://github.com/jorde

react-native-diary's Issues

error in running transitions folder.

First tap not working on custom transition

Hi lintonye,

thank you for your guides and your code.

I've tried to take your CrossFadeTransitioner and use that as my default transition.

this is my router:

import { StackRouter } from 'react-navigation';

import MainScreen from './containers/MainScreen';
import DetailScreen from './containers/DetailScreen';

export default AppRouter = StackRouter({
  Main: { screen: MainScreen },
  Detail: { screen: DetailScreen }
});

this is my reducers:

import AppRouter from './router';

const initialNavState = {
  index: 0,
  routes: [
    { key: 'main', routeName: 'Main' },
    { key: 'detail', routeName: 'Detail' },
  ],
};

const navReducer = (state = initialNavState, action) => {
  const newState = AppRouter.getStateForAction(action, state);
  return newState || state;
};

export default function createReducer() {
  return combineReducers({
    nav: navReducer,
    main: mainScreenReducer,
  });
}

my navigator:

import CrossFadeTrasitioner from './transitioners/CrossFadeTrasitioner';
import AppRouter from './router';

export const AppNavigator = createNavigator(AppRouter)(CrossFadeTrasitioner);

const AppWithNavigationState = connect(state => ({
  nav: state.nav,
}))(({ dispatch, nav }) => (
  <AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav })} />
));

export default AppWithNavigationState;

now when my component Main appear i can't tap anything! so on componentDidMount i've tried to change location after 2 seconds, app goes into Detail and then i can go back and tap anywhere.

Have you any idea of this?

my MainScreen component:

export class MainScreen extends Component {

  componentDidMount() {
    const { navigation } = this.props;
    setTimeout(() => {
      navigation.navigate('Detail');
    }, 5000);
  }

  handleItemTap = () => {
    const { navigation } = this.props;
    navigation.navigate('Detail');
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <TouchableHighlight onPress={this.handleItemTap} style={{flex: 1}}>
          <View style={{flex: 1}}>
            <View style={{position: 'relative', backgroundColor: 'blue', flex: 0.3}} />
            <View style={{backgroundColor: 'red', flex: 0.5, width: 200, alignSelf: 'center'}}>
              <Text> LIST </Text>
            </View>
          </View>
        </TouchableHighlight>
      </View>
    );
  }
}

Thank you in advice.

Lorenzo

undefined is not an object (evaluating'_this.props.navigationState.index')

Thank you for sharing this awesome example of shared elements. I just wanted to tell you the transitions project does not build. I get this error: