React Native: Convert State/Context code from Functional Component to Class Component

user_17079345 0
Viewed 61

I have a simple React-Native app setup in which I use Context to share some data throughout components. I have some code setup for functional components but I would like to convert it to Class component code. Anyone who could help me further?

All that needs to be changed is the way context in de screens and state is handled.

UserContext.js (this one doesn't need changing just putting it here for context.)

import { createContext } from 'react'

export const UserContext = createContext(null);

AccountScreen.js

export default function AccountScreen() {
    const { User, setUser } = useContext(UserContext);

    return (
        <View>
            <Text>ID: {User}</Text>
        </View>
    )
}

App.js

export default function App() {

  const [User, setUser] = useState("yessir");

    return (
      <UserContext.Provider value={{User, setUser}}>
        <PaperProvider theme={theme}>
          <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen name="Register" component={RegisterScreen} options={{ headerShown: false}}/>
              <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false}}/>
              <Stack.Screen name="Home" component={Home} options={{ headerShown: false }} />
            </Stack.Navigator>
          </NavigationContainer>
        </PaperProvider>
      </UserContext.Provider>
    );
}

Home function for nav:

function Home(){
  return(
    <Tab.Navigator 
    barStyle={{ backgroundColor: '#191919'}}
    shifting={true}>
        <Tab.Screen name="Feed" component={HomeScreen} 
        options={{
          tabBarLabel: 'Feed',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          )
        }}/>
        <Tab.Screen name="Explore" component={ExploreScreen} 
        options={{
          tabBarLabel: 'Explore',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="magnify" color={color} size={26} />
          )
        }}/>
        <Tab.Screen name="Account" component={AccountScreen}
        options={{
          tabBarLabel: 'Account',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="account" color={color} size={26} />
          )
        }}/>
    </Tab.Navigator>
  );
}
react-native javascript
1 Answers

A simple way is to write a higher-order component (HOC) with can provide user context props to any component.


import * as React from 'react';
import { createContext } from "react";

export const UserContext = createContext(null);

const withUserContext = (Component) => (props)=> {
  return (
    <UserContext.Consumer>
      {(userContext) => <Component {...props} userContext={userContext}/>
      }
    </UserContext.Consumer>
  );
};

export default withUserContext;

AccountScreen.js

import React from "react";
import withUserContext from "./withUserContext";

class AccountScreen extends React.Component {
  render() {
    const { User, setUser } = this.props.userContext;
    return (
      <View>
        <Text>ID: {User}</Text>
      </View>
    );
  }
}

export default withUserContext(AccountScreen);
user_124315760
Related