0

Render Error | null is not an object (evaluating 'dispatcher.useContext)

Console Warning | Invalid Hook call

I followed all the instructions do Install Moti.

  • Install Moti
  • Install Reanimated v2
  • import 'react-native-reanimated' on App.js
  • add plugins: ['react-native-reanimated/plugin'], on Babel
  • Plug Reanimated in MainApplication.java

I dont know what I can do.

my code

import React from "react";
import {
    View,
    StyleSheet,
    Text,
    StatusBar,
    TouchableOpacity
} from 'react-native'

import { Feather } from '@expo/vector-icons'
import { MotiView, MotiText } from "moti";

const statusbarHeight = StatusBar.currentHeight ? StatusBar.currentHeight + 22 : 64;

export default function Header({name}){
    return(
        <View style={styles.container}>
            <MotiView 
                style={styles.content}
                from = {{
                    translateY: -150,
                    opacity: 1
                }}
                animate = {{
                    translateY: 0,
                    opacity: 1
                }}
                >

                <Text style={styles.username}>{name}</Text>

                <TouchableOpacity activeOpacity={0.9} style={styles.buttonUser}>
                    <Feather name="user" size={27} color="#FFF"/>
                </TouchableOpacity>
            </MotiView>
        </View>
    )


}

const styles = StyleSheet.create({
    container:{
        backgroundColor: '#8000ff',
        paddingTop: statusbarHeight,
        flexDirection: 'row',
        paddingStart: 16,
        paddingEnd: 16,
        paddingBottom: 44,
    },
    content:{
        flex: 1,
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    username:{
        fontSize: 18,
        color: '#FFF',
        fontWeight: 'bold'
    },
    buttonUser:{
        width: 44,
        height: 44,
        backgroundColor: 'rgba(255,255,255,0.5)',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 44/2,

    }
})
Daniel D
  • 1
  • 1

1 Answers1

0

This issue can happen if you have multiple versions of React installed.

If you're using Yarn:

Can you try running yarn why react? If you see multiple versions, I recommend trying a yarn resolution in your package.json:

{
  "resolutions": {
    "react": "your-version-here"
  }
}

Then run yarn install --force and restart your app with expo start -c.

If you're using npm

Can you try running npm install --legacy-peer-deps?

Fernando Rojo
  • 2,633
  • 19
  • 17