Closed emrahc closed 2 years ago
kanzitelli
commented
2 years ago Hey @emrahc. I doubt It has something to do with expo-starter as it's just a convenient way of organising the project structure.
What I can see from logs is that source property of Image is not correct. It may have many causes, so it would be helpful if you provided some code.
Also, if you use MobX arrays somewhere inside a component, make sure you do data.slice().
emrahc
commented
2 years ago I have user store there is photoUri state of user.
const state: UserState = {
user: null,
lang: 'en',
photoUri: null,
token: null,
};I have a main screen component User can see their photo with "photoUri" state. There is match screen. In match screen user sees image with 'photoUri' state. That screen crashes sometimes with the error above
export const Match: React.FC = observer(() => {
const { nav } = useServices()
const [selectHoroscope, setSelectHoroscope] = useState(false);
const { analysis: {
partnerMatch,
partnerPhotoSelectMode,
state: {
partnerHoroscope, partnerPhoto
}
},
user: { state: { photoUri } } } = useStores()
React.useEffect(() => {
partnerMatch({ points: null, partnerPhoto: null })
}, []);
return (
<Container scroll={true}>
<View centerV flex spread paddingHorizontal={"5%"}>
<Image
source={{ uri: photoUri }}
style={{
width: widthToPercentage(30),
height: widthToPercentage(30),
borderRadius: 100,
}}
/>
<View flex center>
{(!partnerHoroscope && !partnerPhoto) && (
<Card
onPress={() => nav.replace("MatchFamous", { isMostFamous: true })}
borderRadius={18}
width="90%"
flex
centerH
containerStyle={{
flex: 1 / 2,
backgroundColor: Colors.primaryGrey,
}}
>
<Image
source={require("../../../assets/images/FamousStar.png")}
style={{
marginTop: "-10%",
// flex: 1,
}}
/>
<Spacer pt={2} />
<Text white>FAMOUS PEOPLE MATCH</Text>
</Card>
)}
</View>
{partnerPhoto && !partnerHoroscope && !selectHoroscope && (
<Button
medium
label="Select Partner Zodiac"
onPress={() => setSelectHoroscope(!selectHoroscope)}
/>
)}
</View>
<Spacer pt={3} />
<PhotoModalPartner />
</Container>
);
});
export default Match;
There is also third screen Famous screen. It loads image from asset folder(require) and another photo with photoUri state. That screen crashes every time with the error above.
I have tried with observer wrapper or without it. Nothing changed. Thanks for help
I also tried wrapping image component but still not working.
{photoUri && <Image/>}
Thanks for help
kanzitelli
commented
2 years ago Hey @emrahc! From what I can see, I would recommend to set photoUri some default value (some kind of placeholder). Also, try to console.log the photoUri value, just for checking, maybe you'll see something strange. And of course, make sure your require paths do exist. Let me know how it goes.
I am not sure if its right place to ask that error. I have a local file link mobx persisted state. A image component gets that file link from mobx state. But application crashes. I have tried with both vanilla rn image component and rnuilib image component.
Previously i was using redux toolkit, it was working fine. Then i moved expo-starter. Now crashes.