I've made a component for doing an ImageButton using TouchableOpacity. Inside on it, I usually put a fontawesome and a text. The problem is that the press is only triggered if I push in the centre of the button (right on the fontawesome).
Another problem, but I think it's linked to the first, is that the animation of pressing, doesn't trigger if I press the icon in the centre.
For a recap:
If I don't click the icon in the button, for example the white space of it, I see the pressing animation but the onPress isn't triggered.
If I click the icon in the button, for example the font awesome, I don't see the pressing animation but the onPress is triggered.
The component:
import React from 'react';
import {Style} from './IconButtonStyle';
import { View, Text, TouchableOpacity,StyleSheet} from 'react-native';
const IconButton = (props) => (
<TouchableOpacity style={!props.style?Style.button:[Style.button,props.style]} onPress={props.onPress}>
<View>
{props.icon}
</View>
<View>
<Text>{props.title}</Text>
</View>
</TouchableOpacity>
)
export default IconButton;
Thanks
Ok, I just realized that I was messing with the caller component. I put the onPress on the image instead on the IconButton component.
Ive tested your code it looks ok : see snack
Related
I'm using a simple TextInput component to capture user input. When the user switches to the numbers-and-punctuation keyboard and hits space, the keyboard does not switch back to the default keyboard on IOS.
Here is an example. code snack:
import React, {useState} from 'react'
import { Text, View, StyleSheet, TextInput } from 'react-native';
export default function App() {
const [inputVal, setInputVal] = useState('')
return (
<View style={styles.container}>
<TextInput style={styles.input} value={inputVal} onChangeText={text => setInputVal(text)} />
</View>
);
}
Here is a video of the problem. After hitting the space button on the numbers keyboard IOS I would like it to change back to the character keyboard.
I've found that adding multiline={true} to the TextInput will partially solve my problem, but for my application, it would be best if the input was not multiline. Is there any other way I could achieve the keyboard switch or am I missing something?
I am creating UI for my new project and the screen length is large so I put the Scrollview so that User can scroll the screen and on the same screen I am using SIX flautists to render some data but When I run my application on IOS simulator then I am getting warning on almost every screen where I am using Flatlist under Scrollview please check the attached screen shot
The warning appears because ScrollView and FlatList share the same logic, if FlatList run inside ScrollView, it's duplicated
By the way SafeAreaView doesn't work for me, the only way to solve is.you can use SafeArea like this
<SafeAreaView style={{flex: 1}}>
<FlatList
data={data}
ListHeaderComponent={ContentThatGoesAboveTheFlatList}
ListFooterComponent={ContentThatGoesBelowTheFlatList} />
</SafeAreaView>
This is happening because it isn't recommended to work with a FlatList within a ScrollView.
A workaround tho would be to add a property to your FlatList like so :
<FlatList
data={yourdata}
nestedScrollEnabled ----> Add this
/>
Hope it solves your problem
i get this case too and the best way is to disable that warning because sometimes we need to use flatlist inside scrollview
import React, { useEffect } from 'react';
import { LogBox } from 'react-native';
useEffect(() => {
LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
}, [])
Description
When a child of a pressable component is pressed (such as an image), the function passed to the onPress prop does not execute on android. Works as expected on iOS.
React Native version:
0.63.2
Steps To Reproduce
Open a new expo snack
Create a Pressable component that is the parent of some other component (A text or image)
Set the onPress prop to call a function that has a visual effect. (Like an alert)
Switch to the android tab, and click 'Tap to play'
Expected Results
The function is called and the effect (an Alert) is fired
Snack, code example, screenshot, or link to a repository:
https://snack.expo.io/#razorshnegax/6c7be3
Code example:
import React from 'react';
import { View, Pressable, Image, Alert } from 'react-native';
export default class Index extends React.Component {
render() {
// The onPress function fires in iOS, but not android
return (
<View>
<Pressable onPress={() => {Alert.alert("Yeep")}}>
<Image source={require('./greatknight.png')} style={{
// So that the image is more centered
top: 100,
left: 100
}}/>
</Pressable>
</View>
);
}
}
Due to the styling, the Pressable component is not place behind the Image.
You can see this by adding a color to the Pressable component.
A fix for this would be to style the Pressable component so the image components are aligned and events bubble through.
I'm not exactly sure why the event doesn't bubble through on Android as it should based on the component hierarchy.
In my case added zindex to resolved this problem. This work even touchable also
<Pressable onPress={() => alert()} style={{zIndex: 0.5, }}>
*****
</Pressable>
I want to create a pop-up in react-native using Modal. Modal should be a created in such a way that it can be reused. Please let me know how to do this as I am new to react-native.
First you will need one state to control when the modal will show.
const [show, setShow] = useState(false)
And then when the condition was achieved, you will set this state to true and show the modal, I will let one example.
<TouchableOpacity
onPress={setShow(true)} />
//some icon
</TouchableOpacity>
Now you will use show to control your modal, but first let's create the modal component. You will create one js file and create the modal component inside it.
import React from 'react'
import {Modal, View, Text} from 'react-native'
const Modal = ({message, buttonMessage, show, setshow}) => {
return (
<Modal
animationType='slide'
transparent={true}
visible={show}
backgroundColor='white'
>
//What you want to show inside the modal, Views, Text, whatever, you will construct one 'screen' here
<View>
<Text>{message}</Text> //Showing the message
<Button
title={buttonMessage}
onPress={setShow(false)} //To not show the modal for example
/>
</View>
</Modal>
)}
export default Modal
Modal component are receiving at the start message and buttonMessage, so you can pass what you want to the component receive and then use it inside your code, and now when you invoke Modal you will pass message and buttonMessage as props to it use, you will see how. Note that Modal are being exported at the end, so now you can use import it in any screen that you want show it.
Let's suppose that you have one screen and will invoke the Modal component that you create.
import React, {useState} from 'react';
import { View, Text} from 'react-native';
import Modal from 'patch' //Note, patch will be where is the modal file that you create
const ContentCompenent = () => {
const [show, setShow] = useState(false)
return (
<View>
// Your screen content
// Your screen content
//Now you will invoke the Modal
<Modal message={'your message or your variable with the message'} buttomMessage={your message or your variable with the message} show={show} setShow={setShow} />
</View>
//When you setShow here to true, the modal will appears, and as you are passing setShow as prop to Modal, when you setShow(false) in the modal it will disappears.
I am trying to translate a ball from one position (x1,y1) to another (x2,y2).
This translation is supposed to take place after clicking the ball.
I am using Animated.View which gets the current position of ball from a state variable. Inside this Animated.View I am wrapping the children using Touchable Opacity. I also looked around in internet and as per my understanding, this problem is related to absolute position of ball (initial and final position of ball is passed as a prop from parent)
<Animated.View style={this.state.position.getLayout()}>
<TouchableOpacity onPress={()=>console.log('clicked')}>
<View>
{this.props.children}
</View>
</TouchableOpacity>
</Animated.View>
I am unable to understand why onPress is not getting triggered and also want to know the solution to this problem. Thanks
Use TouchableOpacity from 'react-native-gesture-handler' instead of from 'react-native'.
import { TouchableOpacity } from 'react-native-gesture-handler';
Follow this post Cannot click TouchableOpacity in animated.view using React native