I am building a react native application and am trying to set the source of an image based on the contents that I am passing to the component as a prop. My code is as follows:
const nameOfComponent = props => {
return (
<View style={some style}>
<Image source={require(props.imageURL)} style={some style} />
</View>
)
}
The prop imageURL is being passed down from the parent component by:
<nameOfComponent imageURL="../dir/name.png" />
When including the code above in my project, I am met with an error saying "Invalid call at line 15: require(props.imageURL)".
Why is this happening? Thanks!
According to React-Native, all your image sources need to be loaded before compiling your bundle. So change your code as,
const nameOfComponent = props => (
<View style={{ some_style }}>
<Image source={props.imageURL} style={{ some_style }} />
</View >
)
Call your child component as,
<nameOfComponent imageURL={require('imagepath')} />
Hope this helps you. Feel free for doubts.
Related
I am created a simple box component which takes image source as props. But while calling HomeScreenBox the image is not rendering..
<HomeScreenBox
BoxName="Add Marks"
BoxImage='require("../assets/images/person.jpg")'
/>
const HomeScreenBox = (props) => {
return (
<View>
<Image source={props.BoxImage} />
<Text>{props.BoxName}</Text>
</View>
);
};
require should not be a string, try
BoxImage={require("../assets/images/person.jpg")}
I would like to implement a custom component that accepts a nested component. Something that can be used like this.
<MyCustomComponent>
<AnyNestedComponent/>
</MyCustomComponent>
I searched about this but only found the use of this.props, which is not what I expect.
How do I implement MyCustomComponent in React Native version 0.68?
Note: MyCustomComponent will consist of View(s).
Its fairly simple in RN,
Your customComponent should be like =
const CumstomComp = ({props = {}, children = null}) => {
return(
<View style={{backgroundColor:"red"}} >
{children}
</View>
)
}
and then you use it like this
App.js or whatever file
const App = () => {
return(
<View>
<CustomComp>
<Flatlist />
<View />
</CustomComp>
</View>
)
}
Hope it helps. feel free for doubts
Im trying to pass a function handleNewFavourite (which updates my favouriteList state array) from my HomeScreen to my DetailsScreen via navigation params but Im getting the following error: Non-serializable values were found in the navigation state
How should I pass functions that modified the state between different stack screens?
HomeScreen code:
<FlatList
data={checkCategory()}
renderItem={({item}) => (
<TouchableOpacity
onPress={() =>
navigation.navigate('Details', {
item,
handleNewFavourite,
})
}>
<LessonCard lesson={item} />
</TouchableOpacity>
)}
/>
DetailScreen code:
const LessonDetails = ({lesson, handleNewFavourite}: LessonProps) => {
const [favourite, setFavourite] = useState<boolean>(lesson.favourite);
return (
<LessonDetailsContainer>
<LessonDetailsInfoContainer>
<LessonDetailsCategoryHead>
<LessonDetailsCategory>{lesson.category}</LessonDetailsCategory>
<TouchableOpacity
onPress={() => {
setFavourite(!favourite);
handleNewFavourite(lesson);
}}>
<LessonDetailsFavouriteIcon>
{favourite ? '❤️' : '🤍'}
</LessonDetailsFavouriteIcon>
</TouchableOpacity>
</LessonDetailsCategoryHead>
<LessonDetailsTitle>{lesson.title}</LessonDetailsTitle>
<LessonDetailsAuthor>{lesson?.author}</LessonDetailsAuthor>
</LessonDetailsInfoContainer>
<LessonDetailsCardImage
source={{
uri: lesson.image,
}}
/>
<LessonDetailsContentContainer>
<LessonDetailsDescriptionText>
{lesson.content}
</LessonDetailsDescriptionText>
</LessonDetailsContentContainer>
</LessonDetailsContainer>
);
};
export default LessonDetails;
For situation like this, you should learn global state management. ( Context API - Redux etc. )
I think you are disrupting in the wrong way the parameters passed to DetailScreen it should be something like this:
const LessonDetails = ({route}: LessonProps) => {
const {lesson, handleNewFavourite} = route.params;
// The rest of your component here
}
As the documentation here suggested. But as #omerfarukose mentioned is not a bad idea to use state management in this particular scenario
I start using rn this week to make a medium scale app for some tutoring school. And found some problem with navigating with defined props.
As u will see i define the stack screen name with 'test1', 'test2' in root app.js same with address variable.
the problem is when i use 'test1' instead of {address} it is working fine, but when i use {address}, it's yelling at me, even when i console it's still 'test1'.
Here's my code :
....
....
<Stack.Screen name="test1" component={GrLesson1} />
<Stack.Screen name="test2" component={GrLesson2} />
function GrHome({navigation}) {
return (
<View>
<GrHomeProps title="test1" address="test1" navigation={navigation}/>
<GrHomeProps title="test2" address="test2" navigation={navigation}/>
</View>
)
}
function GrHomeProps({title,navigation,address}) {
return (
<View>
<TouchableOpacity
onPress={()=>{
navigation.navigate({address})
}}
>
<Text> {title} </Text>
</TouchableOpacity>
</View>
)
}
Can somebody help me? find the mistake i made or teach me another way to do this with reusable component?
without curly brackets
navigation.navigate(address)
This one was already discussed, but from I was able to see there is still no available solution for the issue. I have read all the documents regarding the matter. The error I am getting is: "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead" In the official documents on the plugin, it is suggested application of <ScrollView keyboardShouldPersistTaps={'handled'}>. However, this does not fix the issue. How can I display it inside the Scroll view? Below is my code Thanks
import React from 'react';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
export const GooglePlacesInput = () => {
return (
<GooglePlacesAutocomplete
placeholder='Search'
onPress={(data, details = null) => {
// 'details' is provided when fetchDetails = true
console.log(data, details);
}}
query={{
key: 'my Key',
language: 'en',
}}
/>
);
};
And I want to display it inside the scroll view
export const IznajmiScreen = () => (
<>
<IznajmiListContainer>
<ScrollView keyboardShouldPersistTaps={'handled'} >
<TextInput style={styles.input} placeholder="Naslov" />
<MyDatePickerStart/>
<MyDatePickerEnd/>
<GooglePlacesInput/>
</ScrollView>
</IznajmiListContainer>
</>
)
I found the solution but first do not add this,
import { LogBox } from 'react-native';
LogBox.ignoreLogs(['VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.']);
to your code. You are simply shutting up your application from warning you about errors.
Simply add "horizontal={true}" to any ScrollView wrapping your component like this.
<ScrollView
horizontal={true}
nestedScrollEnabled={true}
keyboardShouldPersistTaps='handled'
contentContainerStyle={{ flexGrow: 1 }}
>
<GooglePlacesAutocomplete/>
</ScrollView>
Happy coding from Nigeria :).