Question about card layout design about rfcs

[StasD]

I figured it out how to implement the functionality which I need using the current version of "react navigation". So, nevermind. :)

Here is what I did:

NavigationService.js:

import { NavigationActions, StackActions } from 'react-navigation';

let _navigator = null;
let _defaultGetStateForAction = null;

let _getStateForAction = (action, state) => {
  if (state && action.type === NavigationActions.BACK) {
    let _params = _getCurrentRoute(state).params;
    if (_params && _params.onBackAction && _params.onBackAction()) {
      return null; // action has been taken care of already
    }
  }

  return _defaultGetStateForAction(action, state);
};

function _getCurrentRoute(state) {
  while (state.routes) {
    state = state.routes[state.index];
  }

  return state;
}

function back() {
  _navigator.dispatch(
    NavigationActions.back({
      key: _getCurrentRoute(_navigator.state.nav).key,
    })
  );
}

function navigate(routeName, params = {}) {
  _navigator.dispatch(
    StackActions.push({
      routeName,
      params,
    })
  );
}

function navigateHome() {
  _navigator.dispatch(
    StackActions.popToTop()
  );
}

function setTopLevelNavigator(navigatorRef) {
  if (navigatorRef && _navigator === null) {
    _navigator = navigatorRef;
    let router = _navigator._navigation.router;
    _defaultGetStateForAction = router.getStateForAction;
    router.getStateForAction = _getStateForAction;
  }
}

export default {
  back,
  navigate,
  navigateHome,
  setTopLevelNavigator,
};

DetailsScreen.js:

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

import nav from '../utils/NavigationService';

export default class DetailsScreen extends Component {
  static navigationOptions = {
    title: 'Details',
  };

  state = {
    itemId: null
  };

  stateHistory = [];

  _onBackAction = () => {
    if (this.stateHistory.length === 0)
      return false;

    let _newState = this.stateHistory.pop();
    this.setState(_newState);

    return true;
  }

  _updateState = (_newState) => {
    this.stateHistory.push({...this.state});
    this.setState(_newState);
  }

  componentDidMount() {
    const { navigation } = this.props;

    navigation.setParams({
      onBackAction: this._onBackAction
    });

    const itemId = navigation.getParam('itemId', 0);

    this.setState({
      itemId
    });
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>itemId: {this.state.itemId}</Text>
        <Button
          title="Go to Home"
          onPress={() => nav.navigateHome()}
        />
        <Button
          title="Go to Details (again...)"
          onPress={() => nav.navigate('Details', {
              itemId: Math.floor(Math.random() * 100),
            })}
        />
        <Button
          title="Update itemId"
          onPress={() => this._updateState({
              itemId: Math.floor(Math.random() * 100),
            })}
        />
        <Button
          title="Go to Another"
          onPress={() => nav.navigate('Another')}
        />
        <Button
          title="Go back"
          onPress={() => nav.back()}
        />
      </View>
    );
  }
}

[satya164]

Closing since this repo is for proposals, not questions.