I want to put Search Input between two View border,but half input hides behind another View.
Click Here To Show Image.
There are two views. One View's backgroundColor is purple and another view's backgroundColor is white.And half Input type is hide behind another view.
<Container>
<Header style={{ backgroundColor: "#635DB7" }}>
<Left>
<Button
transparent
onPress={() => this.props.navigation.navigate("DrawerOpen")}
>
<Icon name="ios-menu" />
</Button>
</Left>
<Right />
</Header>
<View style={{flex:1,zIndex:2}}>
<View style={{height:192,backgroundColor: "#635DB7"}}>
<View style={{position:'absolute',opacity: 1,flex:1,flexDirection:"row",marginTop:160}}>
<Input style={{flexDirection:"row",borderRadius:20,marginLeft:30,marginRight:30,backgroundColor:"#434353", zIndex: 2,opacity: 1}} placeholder="Search" />
</View>
</View>
<View style={{height:448,backgroundColor: "#ffffff",zIndex:1}}>
</View>
</View>
</Container>
Try to put the search bar as a last item in the container, and with absolute position. If that does not work, then you might have hit a bug in RN android, which does not support overflow:
https://github.com/facebook/react-native/issues/6802
https://github.com/facebook/react-native/issues/3198
Related
I want to move text and images around in react native to custom positions on the webpage. I don't want to use bottom, left, and top etc. because it doesn't land in the same place for different devices.
My code is:
const HomeScreen = ({ navigation }) => {
return (
<View style={styles.container}>
<ImageBackground
style={{width: '100%', height: '100%',}}
source={require('./assets/pexels.jpg')}
>
</ImageBackground>
<Text style={{fontWeight:'600', fontSize: 30}}>
Connect With All Websites On The Internet
</Text>
<Text style={{fontSize: 18}}>Reach 800M Daily Active Users To Whatever Business You Own!</Text>
<TouchableOpacity>
<Text>Log In</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text>Create An Ad</Text>
</TouchableOpacity>
<Button
onPress={() => navigation.navigate('login')}
title="Next Screen"
/>
<StatusBar style="auto" />
</View>
);
};
I haven't moved any of these components around yet they are just sitting in the automatic positions on the webpage. I want to add other images and move it under the image background I already set.
I have the following code:
<View style={{ backgroundColor: 'black'}}>
<ArticleSwipable
ref={swipeableRef}
renderRightActions={this.renderRightActions}
onSwipeableClose={() => console.log('close')}
onSwipeableOpen={loadArticleSwipe}
onSwipeableWillOpen={() =>{ setzIndex(100); }}>
<ArticleScreen
article={article}
navigation={navigation}
scrollRef={scrollRef}
header={<Header
onFavouritePress={toggleFavouriteButton}
favouriteButtonIcon={favouriteButtonIcon} />}
isLoading={isLoading}/>
</ArticleSwipable>
<LoadingComponent opacity={loadingFadeAnim} zIndex={zIndex} isLoading={isLoading} />
</View>
where ArticleSwipable is a react-native-gesture-handler/Swipable component but with overridden close method.
ArticleScreen has the following structure:
<View>
<ScrollView>...</ScrollView>
</View>
My goal is to make the Swipeable Component take the entire screen but now if the content is less than the height of the screen will display the white rectangle at the bottom.
Example
If the content is bigger than the height of the screen then everyting is ok.
How can I get rid of the white rectangle at the bottom?
Try this once :
<View style={{ backgroundColor: 'black' ,flex:1}}>
<ArticleSwipable
ref={swipeableRef}
renderRightActions={this.renderRightActions}
onSwipeableClose={() => console.log('close')}
onSwipeableOpen={loadArticleSwipe}
onSwipeableWillOpen={() =>{ setzIndex(100); }}>
<ArticleScreen
article={article}
navigation={navigation}
scrollRef={scrollRef}
header={<Header
onFavouritePress={toggleFavouriteButton}
favouriteButtonIcon={favouriteButtonIcon} />}
isLoading={isLoading}/>
</ArticleSwipable>
<LoadingComponent opacity={loadingFadeAnim} zIndex={zIndex} isLoading={isLoading} />
</View>
And also this :
<View style={{flex:1}} >
<ScrollView>...</ScrollView>
</View>
I have a component that show on iPhone 13 however on iPhone SE which have slight smaller screen some of my elements are not completely showing. I like to know if there a way that I can scale the component so that everything shows on the screen. In this example I have iPhone SE which is cutting off my save button and preview window. however on bigger devices everything show. I do not want this view to be able to scroll.
<>
<Appbar.Header>
<Button
labelStyle={{color: 'white'}}
icon="arrow-left"
mode="text"
onPress={() => goToStep(1)}>
Scenes List
</Button>
<Appbar.Action />
</Appbar.Header>
<View
style={[
styles.container,
{
paddingLeft: insets.left,
paddingRight: insets.right,
},
]}>
<View style={styles.topContainer}>
<TextInput
label="Title (Optional. Default is used if blank)"
mode="outlined"
ref={inputRef}
value={text}
onChangeText={inputText => setText(inputText)}
/>
<Paragraph>
Select a text color then an icon or background color for your button{' '}
<Paragraph style={{color: 'red'}}>
(To reset, press and hold buttons)
</Paragraph>
</Paragraph>
<View style={styles.row}>
<View style={styles.btnWrapper}>
<View style={styles.textBtnContainer}>
<ColorPickerButton
containerStyle={styles.styleBtn}
useText={'TEXT COLOR'}
selectedColor={setSelectedTextColor}
/>
<ColorPickerButton
containerStyle={styles.styleBtn}
useText={'BG COLOR'}
selectedColor={setSelectedBgColor}
/>
<UploadIcon path={setImage} />
</View>
<Button
icon="content-save"
mode="contained"
onPress={saveSelections}>
Save
</Button>
</View>
{screen.orientation === 'Landscape' && (
<View style={styles.previewPortrait}>
<PadPreview item={padSelections} />
</View>
)}
</View>
</View>
{screen.orientation === 'Portrait' && (
<View style={styles.previewLandscape}>
<PadPreview item={padSelections} />
</View>
)}
</View>
</>
There is no general solution for dealing with smaller devices that work out of the box. Most of the time, you have to explicitly deal with this yourself. One way to do this is by retrieving the screen dimensions and than change the design layout and font sizes yourself.
You can do this by using the following code snippet.
import { Dimensions } from "react-native"
const width = Dimensions.get("window").width
const height = Dimensions.get("window").height
An iPhone SE in the first generation has a logical screen width of 320 pixels and a logical height of 568 pixels.
In your specific case you might want to implement a different layout, if the screen width is less or equal to 320 pixel. You could also try to scale the sizes of your components responsively. For the save button this could look as follows.
const width = Dimensions.get("window").width
...
<Button
style={{width: width > 320 ? "100%" : "70%"}}
icon="content-save"
mode="contained"
onPress={saveSelections}>
Save
</Button>
You could also play around with different flex layouts, but you eventually will need to implement different behaviors for very small devices yourself.
I have the background transparent image (the light blue in the screenshot). The problem is when I type something in the textbox a vertical scroll comes up and the form moves a little bit up. Is it possible that the background moves with the scroll as well?
#1 - in the screenshot is the form that moves
#2 - is the background image
Here is the code
<Container style={styles.container}>
<ImageBackground source={loginbackground} style={{width: '100%',height:'100%' }}>
<Content>
<View style={{marginTop:margint,paddingLeft:30,paddingRight:30}}>
<View style={{marginTop:10}}>
<Item style={{backgroundColor:'rgb(149,197,69)',borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>
<Image source={emailicon} style={{height:20,width:20,marginLeft:10,marginRight:10}}/>
<Input placeholder="Email" value={this.state.username} onChangeText={ (text) => this.setState({ username: text }) } placeholderTextColor="rgb(240,240,240)" />
</Item>
</View>
<View style={{marginTop:15}}>
<Item style={{backgroundColor:'rgb(149,197,69)',borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>
<Image source={passwordicon} style={{height:20,width:20,marginLeft:10,marginRight:10}}/>
<Input placeholder="Password" secureTextEntry={true} value={this.state.Password} onChangeText={ (text) => this.setState({ Password: text }) } placeholderTextColor="rgb(240,240,240)" />
</Item>
</View>
{this.state.Loading==true?
<ActivityIndicator
animating={true}
style={styles.indicator} />
:
<View>
<View style={{flexDirection:'row',justifyContent:'center',marginTop:15}}>
<View style={{width:'13%',justifyContent:'center'}}>
<TouchableOpacity onPress={() => this._toggleRememberme()}>
<Image source={this.state.isrememberme?checkboxcheck:checkboxuncheck} style={{width:28,height:28}}/>
</TouchableOpacity>
</View>
<View style={{width:'41%',justifyContent:'center'}}>
<Text onPress={() => this._toggleRememberme()} style={{fontSize:17,color:'rgb(56,56,56)'}} >Remember me</Text>
</View>
<View style={{width:'46%',justifyContent:'center'}}>
<Text onPress={() => this.props.navigation.navigate("forgotpass")} style={{textAlign:'right', fontSize:17,color:'rgb(56,56,56)'}} >Forgot password?</Text>
</View>
</View>
<Text onPress={() => this.props.navigation.navigate("signup")} style={{textAlign:'center', textDecorationLine:'underline', fontSize:17,color:'rgb(56,56,56)',marginTop:15}} >Create an Account</Text>
<Button onPress={() => this.signin()} block style={{backgroundColor:'rgb(107,29,43)', marginTop:15,height:50, borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>
<Text style={{color:'#fff',fontSize:19}}>Login</Text>
</Button>
</View>
}
</View>
</Content>
</ImageBackground>
</Container>
Just to clairify, you would like for the form to appear fixed above the image background, and for the form and image background to move together as you scroll. So, currently your background is fixed, but the form is above and scrolls independently of the background?
I just want to make sure I have your question correct :)
I think when you use ImageBackground it will always behave in this way, hence the "background". If you want the form to move with the image you could try to position the form with "absolute" position on top of a regular Image component. You might want to try using react-native-elements or react-native-paper as they have Card and Surface components which can help to achieve this behaviour.
I realize this isn't a very definitive answer but I hope it helps in some way. Also you might want to just check any style props of the components which you have used as well as reviewing the documentation on ImageBackground. https://reactnative.dev/docs/imagebackground
My apologies that I couldn't give you a better answer.
I have a toolbar in my RN app. That toolbar has a button that is oversized on purpose and is overflowing from the component.
The oversized button is covered by an other component in the same page.
touchable:{
backgroundColor:'#3d3d3d',
borderRadius:27.5,
position:'absolute',
left:width/2 -25,
bottom:10,
alignItems:'center',
borderColor:'black',
width:55,
height:55,
justifyContent:'center',
}
Mark up:
render() {
return (
<View style={{flex: 1}}>
<View style={{position:'absolute', width:42,height:42,left:20,top:(height-42)/3,zIndex:3}}>
<Image style={{}} source={require('./Images/Ellipse 36.png')} />
<Image style={{position:'absolute',top:14,left:14}} source={require('./Images/Asset 65.png')} />
</View>
<View style={{position:'absolute', width:42,height:42,right:20,top:(height-42)/3,zIndex:3}}>
<Image style={{}} source={require('./Images/Ellipse 36.png')} />
<Image style={{position:'absolute',top:10,left:12}} source={require('./Images/Asset 66.png')} />
</View>
<View><TopToolbar text='Swipe' navigator={this.props.navigator} user={this.props.user}/></View>
<ScrollView style={{zIndex:1,}}><Inders style={{flex: 1}} navigator={this.props.navigator} credentials={this.props.credentials}/></ScrollView>
<View style={{zIndex:0,}}><BottomToolbar user={this.props.user} navigator={this.props.navigator} credentials={this.props.credentials}/></View>
</View>
)
}
Where Inders is a component.
I tried changing the order of the components but it didn't work.
What is the way to make a button "float" from another component?
Open inspector in the Dev tools menu and find out who cut your component, I also like to set backgroundColor to see their position, it make solve this type of bugs mack more easy.
The solution is to wrap the toolbar in another View, so that the new View is the parent of the element that you want to "float".