1

I'm trying to develop an iOS app with Expo that is using React Native. I want to share the state between screens. How can I do that?

Tried to use createContext() and useState() on App.tsx but couldn't due to a type error. Tried to customize the solution below, but couldn't just because I didn't know how to do so. How to initialise the set function of useState for TypeScript in a createContext?

BottomTabNavigator.tsx

/**
 * Learn more about createBottomTabNavigator:
 * https://reactnavigation.org/docs/bottom-tab-navigator
 */

import { Ionicons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react';

import Colors from '../constants/Colors';
import useColorScheme from '../hooks/useColorScheme';
import TabOneScreen from '../screens/TabOneScreen';
import TabTwoScreen from '../screens/TabTwoScreen';
import { BottomTabParamList, TabOneParamList, TabTwoParamList } from '../types';

const BottomTab = createBottomTabNavigator<BottomTabParamList>();

export default function BottomTabNavigator() {
  const colorScheme = useColorScheme();

  return (
    <BottomTab.Navigator
      initialRouteName="Evaluator"
      tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
      <BottomTab.Screen
        name="Evaluator"
        component={TabOneNavigator}
        options={{
          tabBarIcon: ({ color }) => <TabBarIcon name="calculator" color={color} />,
        }}
      />
      <BottomTab.Screen
        name="Portfolio Simulator"
        component={TabTwoNavigator}
        options={{
          tabBarIcon: ({ color }) => <TabBarIcon name="analytics-outline" color={color} />,
        }}
      />
    </BottomTab.Navigator>
  );
}

// You can explore the built-in icon families and icons on the web at:
// https://icons.expo.fyi/
function TabBarIcon(props: { name: React.ComponentProps<typeof Ionicons>['name']; color: string }) {
  return <Ionicons size={30} style={{ marginBottom: -3 }} {...props} />;
}

// Each tab has its own navigation stack, you can read more about this pattern here:
// https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab
const TabOneStack = createStackNavigator<TabOneParamList>();

function TabOneNavigator() {
  return (
    <TabOneStack.Navigator>
      <TabOneStack.Screen
        name="TabOneScreen"
        component={TabOneScreen}
        options={{ headerTitle: 'Evaluator' }}
      />
    </TabOneStack.Navigator>
  );
}

const TabTwoStack = createStackNavigator<TabTwoParamList>();

function TabTwoNavigator() {
  return (
    <TabTwoStack.Navigator>
      <TabTwoStack.Screen
        name="TabTwoScreen"
        component={TabTwoScreen}
        options={{ headerTitle: 'Portfolio Simulator' }}
      />
    </TabTwoStack.Navigator>
  );
}

TabOneScreen.tsx

import * as React from 'react';
import { StyleSheet, ScrollView, Alert } from 'react-native';
import { concat } from 'react-native-reanimated';

export default function TabOneScreen() {
  const [selectedLanguage, setSelectedLanguage] = React.useState();

  return (
    <Container>
      blah blah blah
    </Container>

  );
}
Hiroaki Machida
  • 1,060
  • 2
  • 12
  • 23
  • 1
    Your state could be in a common parent component and then you just pass it down to the child components as props. Your child components then should also have event handlers in the props to notify changes on the data. The common parent component should listen to those and update the common state for them, passing down new props. Alternatively, you might want to look into an app wide state solution such as Redux. – Martin Braun May 01 '21 at 02:16
  • What do you want to create...Something where if you could create a state in `App.tsx` you can use anywhere in your app????....Or you just want to pass a state from `Screen 1` to `Screen 2` – Kartikey May 01 '21 at 02:54
  • Using a common parent component sounds fair... I’ll try it. Maybe passing props is a little bit tricky. – Hiroaki Machida May 01 '21 at 03:01

0 Answers0