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" />
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 using "react-native-paper": "^4.12.5" & "react-native": "0.70.4"
I want to transform the layout on the left to the one on the right using react-native-paper. But I have found a problem. I don't know how to center the input, and the placeholder of a TextInput. I would also like to hide the cursor.
I have tried to inject "textAlign" using the style prop of the paper component, but it does not seem to work, and the native props of paper do not allow this transformation.
Do you know how I can adapt the paper component, or do you think I have to design my own?
import * as React from 'react';
import {StyleSheet} from 'react-native';
import {TextInput} from 'react-native-paper';
import {useTheme} from 'react-native-paper';
type textInputProps = {
placeholder: string;
style: object;
};
const CustomInput = ({placeholder, style}: textInputProps) => {
const {colors} = useTheme();
return (
<TextInput
mode="outlined"
placeholder={placeholder}
outlineColor={colors.border}
style={(styles.custom, style)} // Here is the error!
// style={[styles.custom, style]} This is how to do it
theme={{roundness: 30}}
/>
);
};
const styles = StyleSheet.create({
custom: {
textAlign: 'center',
},
});
export default CustomInput;
----- Edit -----
As pointed out by Vu and Nitin, it is perfectly possible to style a paper TextInput to center the cursor using the style prop and the textAlign property. My error was in the way I was passing the style prop, not the style itself.
Syntax error found: style={(styles.custom, style)}
textAlign still work.
Change to: style={[styles.custom, style]} or style={{...styles.custom, ...style}} to resolve.
Firstly to get TextInput and its placeholder to centre you have to modify your TextInput style:
//remove () bracket and style from style
<TextInput
mode="outlined"
placeholder={placeholder}
outlineColor={colors.border}
style={styles.custom}
theme={{roundness: 30}}
/>
or you can directly add inLine style
<TextInput
mode="outlined"
placeholder={placeholder}
outlineColor={colors.border}
style={{
textAlign: 'center'
}}
Second, to hide the cursor from textInput
you have to add to TextInput
caretHidden={true}
which will look like:
<TextInput
mode="outlined"
placeholder={placeholder}
outlineColor={colors.border}
style={styles.custom}
theme={{roundness: 30}}
caretHidden={true}
/>
This is how you will achieve you desired results
maybe you can use this code on your style css
textAlignHorizontal : 'right'
I have a react native project (react native for macOS) I am using the input component but notice there is a blue outline. Not sure how to remove it. I am using Native base input component which I am told it's using the react native input component. How can I remove the ugly blue outline when focus. I am mainly trying to remove the one that is square
import React from 'react';
import {Icon, Input} from 'native-base';
import Ionicons from 'react-native-vector-icons/Ionicons';
const SearchBar = () => {
return (
<Input
variant="rounded"
size="xs"
// w={{
// base: '75%',
// md: '25%',
// }}
InputLeftElement={
<Icon
as={<Ionicons name="ios-search" />}
size={5}
ml="2"
color="muted.400"
/>
}
placeholder="Search"
/>
);
};
export default SearchBar;
When using a React native TextInput component the css styling outline: "none" can be used to remove the outline on focus. This can be done by passing it directly into the style prop.
<View style={styles.body}>
<TextInput
style={{ outline: "none" }}
placeholder="Text"
onChangeText={(newText) => setText(newText)}
value={text}
/>
</View>
);
}
However since you are using a custom component you will need to make sure that the styles are passed to the component.
I am having a very peculiar issue with React Native Elements Text Input along with using touchable opacity.
import React, { useState } from 'react';
import { TouchableOpacity, View, Dimensions } from 'react-native';
import { Input } from 'react-native-elements';
const test = () => (
<TouchableOpacity onPress={() => console.log('we hit here')}>
<Input disabled>
{children}
</Input>
</TouchableOpacity>
)
export default test;
So the outer rim of the input field is completely clickable, however, the center of the component, it cannot be clicked.
This works perfectly for android however.
Any ideas
if anyone has this issue, then the you need to supply a pointerEvents to 'none' for the entire component to be clickable:
<View pointerEvents='none'>
<Input disabled>
{children}
</Input>
</View>
Mubeen hussain answer is correct, but to be more precise it's like this
<TouchableOpacity onPress={() => console.log('we hit here')}>
<View pointerEvents="none">
<Input disabled>{children}</Input>
</View>
</TouchableOpacity>
When I am trying to wrap redux form into the react-native elements it shows following error.
this is my code
import React,{ Component } from 'react';
import { Field,reduxForm } from 'redux-form';
import { Text,Input } from 'react-native-elements';
import { View,Button } from 'react-native';
const renderField=({label,keyboardType,name}) => {
return(
<View style={{flexDirection:'row',height:50,alignItems:'center' }}>
<Text>
{label}
</Text>
<Input />
</View>
)
}
const RegisterForm=props => {
const {handleSubmit}=props;
return(
<View style={{flex:1,flexDirection:'column',margin:40,justifyContent:'flex-start'}}>
<Field label="Username" component={renderField} name="username" />
<Button title='SUBMIT' onPress={handleSubmit} />
</View>
)
}
const Register=reduxForm({
form:'register',
})(RegisterForm);
export default Register;
When used FormInput in react-native elements it works then I am changed it into react-native elements 1.0.0beta4 and replace the formInput with Input component.
After that it shows above error.My debugger window also shows an error
debugger window
The error is due to your upgrade to react-native-elements beta which include breaking changes like the button component props :
The actual error is located in welcomePage.js file (as you can see in debugger), you need to change the object you pass to the button icon prop to a react component (see the button doc in the link above).