I was thinking about passing my <Provider store={Store}> directly to my main index.js file:

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

I mean, I know we can always do something like this in our App.js :

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
import Store from "./src/store.js"  
import Something from './src/container/Something.js';

export default class App extends React.Component {
  render() {
    return (
      <Provider store={Store}>
        <Something />     
      </Provider>
    );
  }
}

I was wondering if we can do it in Index.js, and if so then how?

I was thinking about passing my <Provider store={Store}> directly to my main index.js file:

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

I mean, I know we can always do something like this in our App.js :

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
import Store from "./src/store.js"  
import Something from './src/container/Something.js';

export default class App extends React.Component {
  render() {
    return (
      <Provider store={Store}>
        <Something />     
      </Provider>
    );
  }
}

I was wondering if we can do it in Index.js, and if so then how?

• javascript
• reactjs
• react-native
• react-redux

1 Answer 1

On index.js you could create another component wrapping App:

import {AppRegistry} from 'react-native';
import App from './App';
import React from 'react';
import {Provider} from 'react-redux';
import Store from "./src/store.js"  
import {name as appName} from './app.json';

const Root = () => (
  <Provider store={store}>
    <App />
  </Provider>
)

AppRegistry.registerComponent(appName, () => Root);