0

Im trying to pass image as my parameter on react-router-native and trying to get the data from the location.state but im having issue.

I usually do this to display image

Import Icon from '../image/icon.png';

<View>
  <Image source={icon} />
</View>

but i want to pass the icon to different page

Page1

import Icon from '../image/icon.png';

const nav = useNavigate();
const onClick = () => {
    nav('Page2/:icon', {state: {icon: Icon}})
}
<> 
   <touchableOpacitiy onpress={onClick} />
</>

Page2

let param = useLocation();

</>
   <Image source={param.state}>
</>

I receive the value in param.state but im having error when i set it on the image source because its unknown type. is there a best way to pass image parameter on the other page in react-router-native? im also using typescript on my pages.

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Mer Merced
  • 33
  • 7
  • Is `param.state`, or `location.state` *actually* non-null in the receiving component? I don't think I'd expect an imported image to make it through state like that, though it's nothing I've ever tried to do either, so would need to test. Generally passed route state needs to be JSON serializable. What value are you seeing on the receiving side? If it's there and is just a Typescript issue then you may just need to case the value type. Please confirm what you are seeing. – Drew Reese Sep 14 '22 at 21:13
  • sorry im kinda newbie using both tool, im using param.state since i declare param=useLocation(); not sure if its the same with location.state but when i console.log(param.state) or (param.state.icon) i get the value of "data:image/png;base64,ivgadasdasd" same thing when i console.logs(props.icon) before i pass the parameter on the page2. – Mer Merced Sep 14 '22 at 21:22

1 Answers1

1

First, give the location object a better name so it's harder to confuse with any "params"-type object (i.e. useParams).

const location = useLocation();

Then recast the state to a type you know.

const state = location.state as { icon?: string };

Then access the state object.

<Image source={state} />

Edit react-router-native-passing-image-as-parameter

What seems to have specifically worked for the OP is casting to type any and passing directly state.icon.

const state = location.state as any;

...

<Image source={state.icon} />
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • @MerMerced I think it will work as well, but please do *actually* try it out and test it to be sure. – Drew Reese Sep 14 '22 at 21:35
  • yes, the image is already displaying now thank you. but on my code editor (VScode) im getting this error No overload matches this call. Overload 1 of 2, '(props: ImageProps | Readonly): Image', gave the following error. Type 'ImageProps | undefined' is not assignable to type 'ImageSourcePropType'. Type 'undefined' is not assignable to type 'ImageSourcePropType'. Overload 2 of 2, '(props: ImageProps, context: any): Image', gave the following error. Type 'ImageProps | undefined' is not assignable to type ' but during runtime it works fine. – Mer Merced Sep 14 '22 at 21:42
  • No overload matches this call. Overload 2 of 2, '(props: ImageProps, context: any): Image', gave the following error. Type 'ImageProps | undefined' is not assignable to type 'ImageSourcePropType'.ts(2769) index.d.ts(3703, 5): The expected type comes from property 'source' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly' index.d.ts(3703, 5): The expected type comes from property 'source' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly' – Mer Merced Sep 14 '22 at 21:44
  • @MerMerced Basically just need to get the `{ icon?: string }` part of `as { icon?: string }` to match what is directly passed to the `Image` component for its declared prop types. Or you can just extract `state.icon` first and compose the correct object properties when passing to `Image`. – Drew Reese Sep 14 '22 at 21:48
  • i do tried, i encounter the same error message. – Mer Merced Sep 14 '22 at 22:49
  • @MerMerced IIRC the `Image` component `source` prop takes an object with a `uri` property that is the source string. It seems directly passing `{ icon }` won't work. `react-native-web` and get you only so far in codesandbox, think you could create an [Expo Snack](https://snack.expo.dev/) demo of your code that we could inspect? Specifically I can't send an imported image through route state in the web. – Drew Reese Sep 14 '22 at 23:15
  • I see that the problem is because i'm using typescript. when I change the .tsx to .jsx the error was gone. is there any way for me to pass type in the react-router-native? – Mer Merced Sep 15 '22 at 06:03
  • @MerMerced Sure, we just need to know what needs to be passed as the declared type. Ok, I just got Typescript working with React-Native in the codesandbox I started earlier, let me see if I can figure out the typing. – Drew Reese Sep 15 '22 at 06:09
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/248061/discussion-between-drew-reese-and-mer-merced). – Drew Reese Sep 15 '22 at 06:33