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?
Related
Sigh... how to change button text color in Reat Native. I am using the button from
import { Button } from 'react-native';
I set the button color for yellow and the text didn't show very well I need to change the button text color.
My code is like this, I've tried several things related to changing the text color but none work.
<Button color="#F0C228" style={{ fontColor:"red" }} onPress={() => regiao()} title="Entrar"> </Button>
If you want to ensure the button looks similar on Android and iOS, you should create your own button component using TouchableOpacity.
import { StyleSheet, TouchableOpacity, Text } from "react-native";
const Button = ({ onPress, title }) => (
<TouchableOpacity onPress={onPress} style={styles.buttonContainer}>
<Text style={styles.buttonText}>{title}</Text>
</TouchableOpacity>
);
const styles = StyleSheet.create({
buttonContainer: {
backgroundColor: "#F0C228",
},
buttonText: {
color: "#ff0000",
}
});
export default Button;
And then simply import where you need it.
You can use the color property as shown, but depending on what platform you are testing your app on, you may see different things. For Android, that should change the background color of the button, while on iOS it would change the text color of the button.
I would look at the documentation here. There is an editable piece of code you can use to see results in real-time using their example.
i want to change the placeholder direction to RTL but it doesnt work at all
this is the code
import { TextInput } from 'react-native-paper';
<TextInput textAlign="right" placeholder="RTL Text" />
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'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