Hi i want to use https://github.com/react-native-picker/picker library horizontally. I also found some picker libraries that can be used horizontally but none of them works as stable as this native picker. I tried to give style transform rotate 90 deg but it caused the view below
And I couldnt reach text style to rotate it -90 deg.
I tried to download library and edit it but it's objective c and I don't know nothing about it. How can I do that any ideas?
My picker code
<Picker style={{
width: 100,
position: 'absolute',
right:50,
}}
itemStyle={{
fontSize: 20,
width: 100,
transform: [{ rotate: '90deg' }],
}}
selectedValue={Value}
onValueChange={(itemValue, itemIndex) => {
setValue(+itemValue);
}}
>
{Values.map(item => (
<Picker.Item
key={item.key}
label={item.value}
value={item.key}
></Picker.Item>
))}
</Picker>
I tried to edit the PickerItem.js in library like below but it didn't work
export default function PickerItem({
color,
label,
testID,
value,
enabled = true,
}: Props): React.Node {
return (
<Option
disabled={enabled === false ? true : undefined}
style={{color}}
testID={testID}
value={value}
label={label}>
<Text style={{transform: '-90deg', backgroundColor: 'red'}}>
{label}
</Text>
</Option>
);
}
and also I tried to add
label.transform = CGaffineTransformMakeRotation(M_PI / 2);
to RNCPicker.m
Related
Im doing the exercises to learn react native on codecademy.
I am told "In React, properties are passed as objects on the first parameter to our components. You need to add this parameter in the custom component and use the color property as the background color."
I need to pass color as a parameter to my Box custom component. This is my code:
export const Box = (color) => (
<View color={color} style={{ width: 100, height: 100, backgroundColor: this.props.color }} />
);
It throws me a syntax error.
I also tried :
export const Box = (color) => (
<View style={{ width: 100, height: 100, backgroundColor: color }} />
);
But I am told "View should have a background color set by the color property.". It's the same when I do
export const Box = (color) => (
<View style={{ width: 100, height: 100, backgroundColor: {color} }} />
);
It's very basic but I'm always mistaken when it comes to calling variables in React and properly using them...
If you could help me that would be great!
thanks
Basically, you can get props like this:
export const Box = ( props ) => (
<View color={props.color} style={{ width: 100, height: 100, backgroundColor: props.color }} />);
I tried creating a custom MUI Text field with the following code:
const CustomTextField = styled(TextField)(() => ({
height: '56px',
width: '505px',
'& input + fieldset': {
borderRadius: '12px',
borderColor: 'white',
color: 'black'
}
}));
export function SearchTextField(props: TextFieldProps): JSX.Element {
return (
<CustomTextField
style={{ width: '505px' }}
InputProps={{
style: {
height: '56px'
},
startAdornment: (
<InputAdornment position="start">
<SearchOutlined fontSize="medium" color="info" />
</InputAdornment>
)
}}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
/>
);
}
When I add a background to the same, the input and the icon I have added is disappearing. I can still type and the input is still being taken but I can't see them.
It's supposed to look like this
But looks like this
Any kind of help is appreciated
The goal: create a text input field that responsively expands as input lines expand, up to a certain point, like most messaging apps.
The problem: as input expands past 3 or 4 lines, instead of the top of the input container expanding upwards, the input container expands based on content size, as it should, but the container is repositioned behind the keyboard/keyboard word suggestions, which re-positions the button on the left (part of the input container) as well as the <TextInput> itself.
the picture below shows how I want the padding to be on the bottom. the "lower container" embodies the button and the input field. the off-grey color is the top of the keyboard suggestions (iOS)
The image below shows the undesired behavior. you can see the bottom border of the input, as well as the button start to disappear behind the suggestion box/keyboard. If the input kept expanding, the bottom border and button would progressively become less visible.
Here is the whole screen component:
render () {
return (
<KeyboardAvoidingView
style={{ flex: 1, backgroundColor: Colors.PRIMARY_OFF_WHITE,
}}
behavior={Platform.OS === 'ios' ? 'position' : null}
keyboardVerticalOffset={Platform.OS === 'ios' ?hp("11%") : 0}
>
/* Upper Container */
<View style={{ justifyContent: 'flex-start', height: height*0.8, paddingBottom: 10 }}>
<FlatList
data={this.props.messages}
ref={'list'}
onContentSizeChange={() => this.refs.list.scrollToEnd()}
keyExtractor={(item) => {
return (
item.toString() +
new Date().getTime().toString() +
Math.floor(Math.random() * Math.floor(new Date().getTime())).toString()
);
}}
renderItem={({ item, index }) => {
return (
<Components.ChatMessage
isSender={item.sender == this.props.uid ? true : false}
message={item.content.data}
read={item.read}
time={item.time}
onPress={() =>
this.props.readMsg(
{
id: this.props.uid,
role: this.props.role,
convoId: this.state.ownerConvoId
},
item.docId,
this.props.navigation.state.params.uid
)}
/>
);
}}
/>
</View>
/* Lower Container */
<View
style={{
height: this.state.height+20,
flexDirection: 'row',
alignItems: 'center',
justifyContent:"space-around",
paddingVertical: 10
}}
>
<Components.OptionFan
options={[
{
icon: require('../assets/img/white-voice.png'),
onPress: () => {
this.props.navigation.navigate('Schedule', {
receiver: this.conversants.receiver,
sender: this.conversants.sender,
type: 'Voice'
});
},
key: 1
},
{
icon: require('../assets/img/white-video.png'),
onPress: () => {
this.props.navigation.navigate('Schedule', {
receiver: this.conversants.receiver,
sender: this.conversants.sender,
type: 'Video'
});
},
key: 2
}
]}
/>
<TextInput
multiline={true}
textAlignVertical={'center'}
onChangeText={(text) => this.setState({ text })}
onFocus={() => this.refs.list.scrollToEnd()}
onContentSizeChange={(event) =>
this.setState({
height:
event.nativeEvent.contentSize.height <= 40
? 40
: event.nativeEvent.contentSize.height
})}
style={{
height: Math.max(40, this.state.height),
width: wp('80%'),
borderWidth: 1,
alignSelf: this.state.height > 40 ? "flex-end":null,
borderColor: Colors.PRIMARY_GREEN,
borderRadius: 18,
paddingLeft: 15,
paddingTop: 10,
paddingRight: 15
}}
ref={'input'}
blurOnSubmit={true}
returnKeyType={'send'}
placeholder={'Write a message...'}
onSubmitEditing={() => {
if (this.props.role == 'Influencer') {
this.send();
this.refs.input.clear();
} else {
this.setState({ visible: true });
}
}}
/>
</View>
</KeyboardAvoidingView>
);
}
How can I go about implementing an outgrow that stays in view with the desired padding on the bottom?
EDIT: to be clear, this question is not about how to make an auto-grow input field. the code above already accomplishes that. its about the container the auto-grow input field is in, and how the parent container, input field, and button grow behind the the keyboard/keyboard suggestions. the Goal is to have the text input always display directly above the keyboard, with the bottom of the input/button/container consistently the same space between the keyboard, while the height expands upward only.
the question posted here is similar: In React Native, How to have multiple multiline textinputs that don't hide behind the keyboard in one scrollable form?
You can set the parent container to be '100%' height and resize the upper content so that the input container always grows upwards.
A simple implementation of this is as follows. textInputHeight is taken from the state and it is set when TextInput resizes.
return (
<KeyboardAvoidingView
style={{height: '100%'}}
behavior={Platform.OS === 'ios' ? 'position' : undefined}
keyboardVerticalOffset={100}>
<ScrollView
style={{
backgroundColor: '#777',
height: height - (80 + textInputHeight),
}}>
<View style={{height: 1000}} />
</ScrollView>
<TextInput
multiline={true}
onLayout={(event) => {
if (textInputHeight === 0) {
setTextInputHeight(event.nativeEvent.layout.height);
}
}}
onContentSizeChange={(event) => {
setTextInputHeight(event.nativeEvent.contentSize.height);
}}
/>
</KeyboardAvoidingView>
);
As an additional note, when factoring in dynamic heights of portions of your screen, always remember to account for status bars (both iOS and android obviously) as well as the pesky Soft Android Navigation Bar at the bottom of the screen, as its not factored in when using the Dimension api for 'window'. My mistake to ignore this.
to get Status bar and nav bar:
import {NativeModules, Platform} from 'react-native';
const { StatusBarManager } = NativeModules; // Note: StatusBar API is not good used here because of platform inconsistencies.
// Note: 'window' does not contain Android/iOS status bar or Android soft Navigation Bar
const WINDOW_HEIGHT = Dimensions.get('window').height;
// 'screen' gets full hardware dimension
const DEVICE_HEIGHT = Dimensions.get('screen').height;
const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBarManager.HEIGHT;
const ANDROID_NAV_HEIGHT = Platform.OS === 'ios' ? 0 : DEVICE_HEIGHT - (WINDOW_HEIGHT + STATUSBAR_HEIGHT);
I developing a react native project.
I use react-native-custom-picker but when I try gives a Custom Picker style it's not working. my code like this below
//.. in CustomPicker.js
<CustomPicker
placeholder={labelDefault}
options={options}
getLabel={item => item.label}
optionTemplate={this.renderOption}
selectedValue={this.props.selectedValue}
onValueChange={this.onValueChangeCustomPicker}
textStyle={{color:colors.dark_black,fontSize:25}}--> Here is not work
/>
renderOption() function like this
renderOption(settings) {
const { item, getLabel } = settings
return (
<View style={styles.optionContainer}>
<View style={styles.innerContainer}>
<Text style={{ color: colors.dark_black, alignSelf: 'flex-start', fontSize: 24 }} key={item.key}>{item.label}</Text>
</View>
</View>
)
}
I know Picker style only support IOS.
What's my fault? Any idea!
can you try this code?
I don't know how you organized "options," but you can't work because you don't have any place to take the factors for "colors."
renderOptions:
const options = [
...
color: "black",
]
...
renderOption(settings) {
const { item, getLabel } = settings
return (
<View style={styles.optionContainer}>
<View style={styles.innerContainer}>
<Text style={{ color: item.color, alignSelf: 'flex-start', fontSize: 25 }} key={item.key}>{item.label}</Text>
</View>
</View>
)
}
<CustomPicker
placeholder={labelDefault}
options={options}
getLabel={item => item.label}
optionTemplate={this.renderOption}
selectedValue={this.props.selectedValue}
onValueChange={this.onValueChangeCustomPicker}
/>
I checked source code and documentation if I wanna give style placeholder I should use props for field template like this.
<CustomPicker
fieldTemplateProps={{textStyle:{color:"red",fontSize:22}}}
placeholder={'Please select your favorite item...'}
options={options}
getLabel={item => item.label}
optionTemplate={this.renderOption}
headerTemplate={this.renderHeader}
onValueChange={value => {
Alert.alert('Selected Item', value ? JSON.stringify(value) : 'No item were selected!')
}}
/>
it's worked in my project
more detail
How to use flex in react-native to make any element inside <View></View> to arrange themselves when their length got bigger than their container's ?
Below is my code:
const FilmCasts = ({ artists }) => (
<View style={{ flex: 1, flexDirection: 'row', }}>
{artists.map(artist => (
<Image
key={cast.name}
source={{ uri: artist.img }}
style={{ width: 80, height: 100 }}
/>
))}
</View>
);
This is what I want. I want to make the 5th and others to go below the first row automatically after they hit the screen width limit, like what HTML usually does
But instead, this is what I get when in React Native, the <Image> elements continue to be rendered outside their parent's width
You can use the prop flexWrap:'wrap' for wrapping the elements. flexWrap controls whether children can wrap around after they hit the end of a flex container. More here
const FilmCasts = ({ artists }) => (
<View style={{ flex: 1, flexDirection: 'row',flexWrap:'wrap' }}>
{artists.map(artist => (
<Image
key={cast.name}
source={{ uri: artist.img }}
style={{ width: 80, height: 100 }}
/>
))}
</View>
);
You can simply defined image with dynamically using the Dimension property of react native .
like when you are using
<Image
resizeMode="cover" or try "contain"
key={cast.name}
source={{ uri: artist.img }}
style={{ width: width * 0.5 , height: 100 }} // this will be done currently defining the values .
/>
Here is one blog regarding image handling in react native Click to see the blog
Hope my answer will give an idea to slove your problem