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'
Related
I am new to React Native and i am having trouble with the following error message:
text string must be rendered within a <Text> component
This is my component:
import React from "react";
import { Text, StyleSheet, View, Button } from "react-native";
const HomeScreen = () => {
return (
<View>
<Text style={styles.text}>Hey!</Text>
<Button title='Go components demo'/>
</View>
);
};
const styles = StyleSheet.create({
text: {
fontSize: 30,
},
});
export default HomeScreen;
My strings are wrapped within a Text component and the error message persists. Any typo am i not seeing or doing anything wrong?
Your error is likely somewhere else in your app. one way to test this is to comment out the component inside of your App component or wherever your Homescreen component is being called. It's more likely that wherever you're mounting HomeScreen, there is extraneous text. Perhaps something you missed when deleting the boilerplate code.
Give some width and height to your view ,or try give a flex of 1 :
Hope it helps.
<View style = {{flex:1}}>
<Text style={styles.text}>Hey!</Text>
<Button title='Go components demo'/>
</View>
or
<View style = {{width:'100%',height:'100%'}}>
<Text style={styles.text}>Hey!</Text>
<Button title='Go components demo'/>
</View>
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'm using react-native-paper and I want to get an Icon component but without any link with Button Component. I went through the doc and I didn't found an Icon Component. I want something similar than react-native-elements one
import { Icon } from 'react-native-elements'
<Icon
name='g-translate'
color='#00aced' />
So please help me to achieve this.
you can use "react-native-vector-icons" library because the icon in react-native-paper is from react-native-vector-icons.
here is code:
import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = <Icon name="rocket" size={30} color="#900" />;
You can use Avtar.Icon. By default, it has some margin around the icon. You can create your own component by modifying the Avtar.Icon. Here is an example:
const iconSize = 34
const customAvtardimension = 0.6 * iconSize
<Avatar.Icon
size={iconSize}
icon="bell-ring-outline"
color={Colors.redA700}
style={{
backgroundColor: Colors.transparent,
width: customAvtardimension,
height: customAvtardimension,
}}
/>
Is there any way of overriding iOS default behavior of placing ellipsis at the end of TextInput when text overflows? What I want to be able to see are the last characters before the text is truncated.
You can reproduce this with any TextInput. Below is some example code:
import React, { Component } from 'react';
import { TextInput } from 'react-native';
export default function UselessTextInput() {
const [value, onChangeText] = React.useState('Useless Placeholder');
return (
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
onChangeText={text => onChangeText(text)}
value={value}
/>
);
}
You can use multiline attribute as follows. numberOflines specify the number of visible lines (height) in screen. If text more than 4 lines, then it will add scroll automatically.
Please note, I have removed height from the style.
<TextInput
multiline
editable
numberOfLines={4}
maxLength={4000}
style={{ borderColor: 'gray', borderWidth: 1 }}
onChangeText={text => onChangeText(text)}
value={value}
/>
Is there a way to programmatically highlight/select text that is inside a TextInput component?
You can use selectTextOnFocus to achieve this. This will ensure that all text inside the TextInput is highlighted when the field is tapped into.
Actually you can, by accessing textInput's method by refs.
<TextInput ref={input => this.myInput = input} selectTextOnFocus style={{height: 100, width: 100}} defaultValue='Hey there' />
and where you want to select all text programmatically you can
this.myInput.focus()
works on iOS, not sure about android.
Reference : http://facebook.github.io/react-native/releases/0.45/docs/textinput.html#selectionstate
I don't know if there's a better way, but I found a workaround. The text has to be focused first. Here's an example
import React { Component } from 'react';
import { Button, TextInput, findNodeHandle } from 'react-native';
import TextInputState from 'react-native/lib/TextInputState';
class MyComponent extends Component {
render() {
return (
<View style={{ flex: 1, }}>
<Button
title="select text"
onPress={() => {
TextInputState.focusTextInput(findNodeHandle(this.inputRef))
}}
</
<TextInput
selectTextOnFocus
ref={ref => this.inputRef = ref}
/>
</View>
);
}
}
I'm here to share my findings. In a List, you might encounter that selectTextOnFocus is broken. In this case you can use this method selection. From React-Native I found this:
In my case I had trouble with the selectTextOnFocus prop in a list. So I had to add a debounce function to work with selection prop.
const [shouldSelect, setShouldSelect] = useState(undefined);
const onFocus = () =>{
setShouldSelect({start:0, end:String(text).length});
}
const focus = useCallback(_.debounce(onFocus,500),[shouldSelect]);
<TextInput
selection={shouldSelect}
onBlur={()=>setShouldSelect(undefined)}
onFocus={()=>focus()}// this is important
selectTextOnFocus
ref={r=>onRef(r)}
keyboardType={'number-pad'}
autoCorrect={false}
blurOnSubmit={false}
returnKeyType={'done'}
underlineColorIos={'transparent'}
underlineColorAndroid={'white'}
allowFontScaling={false}
value={String(text)}
/>
this.inputRef.focus() sets focus to the TextInput component, and then the flag you set in the attributes selectTextOnFocus does the rest.
Note: For those who wants to use selectTextOnFocus short answer. Actually, it works fine in IOS, but doesn't work in Android.
Thanks to Arnav Yagnik; Following is a similar approach in a functional component:
const inputRef = React.useRef(null);
React.useEffect(() => {
if (inputRef.current) {
console.log('focusing !');
inputRef.current.focus();
}
}, []);
return <TextInput
multiline
label="Amount"
selectTextOnFocus
placeholder="Write Count"
value={stockCount.toString()}
/>