在Gluestack UI应用中使用React Recoil出现useContext报错的问题

错误原因 #

你遇到的Uncaught TypeError: Cannot read properties of null (reading 'useContext')错误，核心问题是Hook调用位置违反了React规则：

• useRecoilState是Recoil基于React Hook实现的状态读取方法，必须在React组件内部（或自定义Hook中）调用。
• 你把const [appState, setAppState] = useRecoilState(appStateAtom);写在了App组件函数外部，此时既不在React组件渲染流程里，也不在RecoilRoot提供的上下文范围内，Recoil无法获取所需的Context，因此抛出读取useContext的空指针错误。

正确集成步骤 #

1. 调整Hook调用位置 #

将useRecoilState移动到需要使用状态的组件内部，且该组件必须被RecoilRoot包裹。比如可以在Container组件中使用这个状态：

2. 修改后的完整代码 #

state.js（无需修改）

import { atom } from 'recoil';

export const appStateAtom = atom({
    key: 'ApplicationState',   
    default: {
        name: 'My Application'
    }
});

App.tsx（关键修改）

import { Box, GluestackUIProvider, Text } from '@gluestack-ui/themed';
import { ScrollView } from 'react-native';
import { RecoilRoot, useRecoilState } from 'recoil';
    
import { appStateAtom } from './state.js';

export default function App() {
  return (
    <RecoilRoot>
      <GluestackUIProvider>
        <Home />
      </GluestackUIProvider>
    </RecoilRoot>    
  );
}

const Home = () => {
  return <Container />;
};

const Container = () => {
  // 将useRecoilState移到组件内部
  const [appState, setAppState] = useRecoilState(appStateAtom);
  
  return (
    <Box flex={1} backgroundColor="$black">
      <ScrollView
        style={{ height: '100%' }}
        contentContainerStyle={{ flexGrow: 1 }}
      >
        <Box
          height="60%"
          sx={{
            '@base': {
              my: '$16',
              mx: '$5',
              height: '80%',
            },
            '@lg': {
              my: '$24',
              mx: '$32',
            },
          }}
          justifyContent="space-between"
          alignItems="center"
        >
          {/* 使用Recoil中的状态值 */}
          <Text color="$white" fontWeight="$medium" ml="$2">{appState.name}</Text>
        </Box>
      </ScrollView>
    </Box>
  );
};

集成注意事项 #

• RecoilRoot需要作为应用的顶层包裹组件之一，确保所有需要使用Recoil状态的组件都在其范围内（你的代码中已经正确将GluestackUIProvider放在RecoilRoot内部，这没问题）。
• 所有Recoil的Hook（useRecoilState、useRecoilValue等）必须在React组件的顶层作用域调用，不能放在条件判断、循环等语句中。
• 如果需要在多个组件共享状态，确保对应的Atom定义在单独文件中，避免重复定义。

内容的提问来源于stack exchange，提问作者Dev