I made a DEMO
so the problem is that third button isn't working. The only difference between buttons is the way I passed them in Header component.
<Header secondButton={<View style={styles.button}><Text>Second Button</Text></View>}
thirdButton={<ThirdButton />}
onPress={this._handlePress} />
My solution was to turn this ...
<TouchableWithoutFeedback onPress={props.onPress}>
<Contents {...props} />
</TouchableWithoutFeedback>
into this...
<TouchableWithoutFeedback onPress={props.onPress}>
<View>
<Contents {...props} />
</View>
</TouchableWithoutFeedback>
answered by #brentvatne on github
I was able to fix it in this example - notice that I changed the
<View> in your ThirdButton to include {...this.props}
<View style={styles.button} {...this.props}>
.. etc
</View>
The reason for this is that TouchableWithoutFeedback will set responder
props on that component, but ThirdButton is just a composite component
with no backing UIView, so I want to pass those on to the View.
See what I'm talking about here
Related
I want to
react-native-insta-story
for show videos and images but I can't show videos.I am encountering an error. I saw black screen until end of video's time.
` Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.
Move data fetching code or side effects to componentDidUpdate.
If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.
Please update the following components: AndroidCubeEffect`
my rn and component version
and How can I fix?
I search github and stackoverflow but I didnt find resolve. I am open every solution.
unfortunately you can't use video in that package. but you can download the package and make change according to your requirements in this StoryListItem component and then you can use the videos.
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
{props.isVideo ? <Video src={src} style={styles.avatarImage} /> :
<Image style={styles.avatarImage} source={{ uri: profileImage }} />
<Text style={styles.avatarText}>{profileName}</Text>
</View>
here Image Component is used you can use react-native-video and use Video component here
react-native-insta-story does not support video. But dont worry, You can develop it by yourself. Based on the permission of the package developer. You can use the patch-package or you can clone react-native-insta-story and then modify it.
For black screen until end of video time. is it any sound? if yes, the video is playing. you just need to fix the style element of the video. If no sound, you can try the solution below.
Focus on StoryListItem component. go to line 194 to 205. you will see code like this.
<View style={styles.backgroundContainer}>
<Image
onLoadEnd={() => start()}
source={{ uri: content[current].story_image }}
style={styles.image}
/>
{load && (
<View style={styles.spinnerContainer}>
<ActivityIndicator size="large" color={'white'} />
</View>
)}
</View>
We will add video support by add this package react-native-video. After Installation just modify the code above to. The logic is Data/API says it`s video then Video component will appear else Image component will appear
<View style={styles.backgroundContainer}>
content[current].type.startsWith("video") ?
<Video
source={{uri: content[current].video}}
ref={ref => (videoPlayer.current = ref)}
resizeMode={'contain'}
onLoad={onLoad}
onEnd={onEnd}
style={styles.video}
/> :
<Image onLoadEnd={() => start()}
source={{uri: content[current].image}}
style={styles.image}
/> }
{load && <View style={styles.spinnerContainer}>
<ActivityIndicator size="large" color={'white'}/>
</View>}
</View>
Finally, react-native-insta-story suports video now.
I am attempting to create a simple tab component generated by a functional component using react-tabs. Here is what I thought would be a fairly simple and straightforward approach:
export default function TabScreen({ navigation }) {
return(
<View>
<Tabs>
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
</TabList>
<TabPanel>
<Text>
Content 1
</Text>
</TabPanel>
<TabPanel>
<Text>
Content 2
</Text>
</TabPanel>
</Tabs>
</View>
);
}
However this returns the following error: Uncaught TypeError: Object(...) is not a function
How can I resolve this?
Also- if anyone has a different library they'd reccomend for something like this I’m open to that as well.
Following the example at https://material-ui.com/guides/composition/#button, i define in my main page a button:
<BrowserRouter>
<Box m={2}>
<Button
size="large" variant="contained"
color="primary" endIcon={<TimerIcon />}
fullWidth={true}
component={SubmitTime}>
Enter hours
</Button>
</Box>
</BrowserRouter>
Documentation states:
Routing libraries
The integration with third-party routing libraries is achieved with the component prop. The behavior is identical to the description of the prop above. Here are a few demos with react-router-dom. It covers the Button, Link, and List components, you should be able to apply the same strategy with all the components.
Now, based on the above, my understanding would be that the above would render a button that, when clicked, would get me to the SubmitTime component. Instead, I get the component itself rendered:
Being new to React and react-router-dom, i think i am doing something wrong, but can't understand what?? Any clue appreciated.
I tried adding 'to' to the component, like so, with same results:
<Button
size="large" variant="contained"
color="primary" endIcon={<TimerIcon />}
fullWidth={true}
component={SubmitTime} to="/timesheet">
Enter hours
</Button>
component is supposed to be the style of the button. Here you can see an example of using the button as a link: https://material-ui.com/components/buttons/#cursor-not-allowed. Also try reading the api: https://material-ui.com/api/button/#props
If you want your button to function as a link, add the href="/timesheet" attribute to it. Else push the route to the history:
const history = useHistory();
...
<Button
size="large" variant="contained"
color="primary" endIcon={<TimerIcon />}
fullWidth={true}
onClick={() => history.push("/timesheet")}
>
Enter hours
</Button>
In my scenario, I am trying to implement react native check box for android and iOS using Reactnative Elements. Here, I need to change checkbox with label background colour. It is showing full white but how to change it is transparent?
https://react-native-elements.github.io/react-native-elements/docs/checkbox.html
<CheckBox
checkedIcon={<Image source={require('../checked.png')} />}
uncheckedIcon={<Image source={require('../unchecked.png')} />}
checked={this.state.checked}
onPress={() => this.setState({checked: !this.state.checked})}
/>
Just use the containerStyle prop (https://react-native-elements.github.io/react-native-elements/docs/checkbox.html#containerstyle)
The easiest (but also ugliest) way would be to say
<CheckBox
containerStyle ={{backgroundColor: 'transparent'}}
checkedIcon={<Image source={require('../checked.png')} />}
uncheckedIcon={<Image source={require('../unchecked.png')} />}
checked={this.state.checked}
onPress={() => this.setState({checked: !this.state.checked})}
/>
I have a simple shopping cart page in React Native app and I have "plus/minus" buttons for amount of each item.
I have 2 questions:
1- What is the best way to update items price when I tap to change the amount of each item? Should each price be an State?
2- Actually, I can statically change amount of each item in cart, but when I change any RN State, all items amounts I've changed is lost. How can I save my actions for not lose it all at states change?
<ScrollView>
<View style={styles.items} product="1">
<Avatar
size="large"
rounded
source={{ uri: "https://picsum.photos/80/80?random" }}
/>
<View style={styles.text}>
<Text style={styles.title}>Uva Prata</Text>
<Text style={styles.price}>R$ <Text style={styles.money}>4,90</Text> <Text style={styles.unit}>/ kg</Text></Text>
</View>
<View style={styles.amount}>
<NumericInput rounded
onChange={ } />
</View>
</View>
...other view
...other view
...other view
...