I have a rather deeply nested component with a wrapper around the entire thing. I made sure its properly installed and imported from expo, so no errors and the component renders, just with no Linear Gradient above it. The code is as follows, NOTE that the colors are 'black' and 'white' for testing, but eventually 'white' will be changed with a transparent value
import React from 'react';
import { View, TouchableWithoutFeedback, Keyboard, ImageBackground, Image } from 'react-native';
import { LandingStyles } from '../../Styles/LandingPageStyles';
import LandingPageContainer from './LandingComponents/LandingPageContainer';
import Title from './LandingComponents/Title';
import backgroundImage from '../../assets/loginBackground.png'
import {LinearGradient} from 'expo-linear-gradient';
const LandingPage = ({ handleLoggedIn }) => {
return (
<LinearGradient colors={['black' ,'white']} start={{x: 0.5, y: 1 }} end={{x: 0.5, y: 0.7 }} style={{flex: 1}}>
<View style={LandingStyles.container}>
<ImageBackground style={LandingStyles.backdrop} source={backgroundImage} resizeMode="cover">
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View style={{backgroundColor: 'rgba(52, 52, 52, 0.4) !important',}}>
<View style={LandingStyles.titleIcon}>
<Title />
</View>
<LandingPageContainer handleLoggedIn={handleLoggedIn} />
</View>
</TouchableWithoutFeedback>
</ImageBackground>
</View>
</LinearGradient>
);
};
export default LandingPage;
Whenever I run the app to test, there's just no difference. I can comment out the Gradient and nothing changes. I've tried having it wrap the component (as shown above) or just being placed in as a single component (<LinearGradient /> instead of <LinearGradient> </LinearGradient>) but nothing works. Any ideas?
Related
I have a text input in an overlay in my react native application. I used keyboardavoidingview to make sure the keyboard doesn't cover my submit button but the entire overlay is not moving with the keyboard only the inside content is moving. Heres an image of what is happening. Is there any way to move the overlay with the content too?
This is my code
<Overlay overlayStyle={{borderRadius:15,backgroundColor:'#f8f8f8',paddingTop:20,paddingLeft:20,height:300}} isVisible={showrevoverlay} onBackdropPress={()=>{resetoverlay()}}>
<KeyboardAvoidingView keyboardVerticalOffset={300} style={{flex:1,alignItems:'center',justifyContent:'center'}} behavior="padding">
<View style={{flexDirection:'column',justifyContent:'space-evenly',alignItems:'center'}}>
<Text style={{fontWeight:'bold',textAlign:'left',width:'100%'}}>Review:</Text>
<TextInput
placeholder="Write review"
style={{alignItems:'center',justifyContent:'center'}}
style={{ height: 200,width:300, borderColor: 'gray',backgroundColor:'#eef4f6',marginTop:10}}
onChangeText={text => setreview(text)}
value={review}
/>
<TO onPress={()=>{saveReview()}} style={{marginTop:10,width:100,height:50,backgroundColor:'#4B53F2',justifyContent:'center',alignItems:'center'}}><Text style={{fontFamily:'Montserrat-Bold',color:'white',fontSize:15}}>Submit</Text></TO>
</View>
</KeyboardAvoidingView>
</Overlay>
Here is the solution to solve this problem. you can add your code.
import React , {Component} from 'react';
import {View , Dimensions,ScrollView} from 'react-native';
const windowHeight = Dimensions.get('window').height;
export default class Overlay extends Component {
render(){
return(
<View style={{flex:1}}>
<ScrollView style={{flex:1}}>
<View style={{width:'100%', height:windowHeight }}>
/*Every thing inside this will shift up with out changing style */
</View>
</ScrollView>
</View>
)
}
}
I am using react navigation v5 to create my modal.
I want my modal to show in the beginning of 50% height, and when I press a button I want my modal to have 100% height. And toggle 50% to 100% to 50% back and forth.
However, I am unsure how to do this.
My code looks something like this.
Navigation
render(){
return (
<NavigationContainer>
<RootStack.Navigator mode="modal" headerMode = "none">
<RootStack.Screen name="home" component = {Home} />
<RootStack.Screen name="modala" component={ModalA}
options={{cardStyle: {backgroundColor: "transparent"}}}/>
</RootStack.Navigator>
</NavigationContainer>
);
}
As you can see I want my modalA to overlap Home component in the beginning as 50% width and if i press a button inside ModalA, I want my modal to be 100%. Is this possible?
Yes, its possible. To show the modal on the initial screen you must create this Modal Component on that screen
e.g
import React, { Component, useState } from 'react';
import {View, Text} from 'react-native';
import Modal from "react-native-modal";
const Home = (props) => {
const [height, setHeight] = useState('50%');
return (
<View>
<Modal isVisible={true}>
<View style={{ height, width: "80%", justifyContent: 'center', alignItems: 'center'}}>
<Text>I am the modal content!</Text>
<TouchableOpacity onPress={() => setHeight("50%")}>
<Text>Set 50% Height</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => setHeight("100%")}>
<Text>Set 100% Height</Text>
</TouchableOpacity>
</View>
</Modal>
</View>
);
}
I'm currently working on an React Native project. I need to implement a feature similar to "Swipe Down To close Modal" on Instagram
I believe that you're using #react-native-community/react-native-modal package. In the library documents, you can see that there is a property called swipeDirection which is either a string or an array that can be one or many of the following options; 'up', 'down', 'left' or 'right.
You can also set the threshold required swipe action to be completed by using swipeThreshold property. The default is 100 according to the library documents.
Here's an example of the modal;
import React from 'react';
import {View, Text} from 'react-native;
import Modal from 'react-native-modal';
const ModalComponent = props => {
const [isVisible, setIsVisible] = useState(true);
return (
<Modal isVisible={isVisible}
swipeDirection="down"
//swipeDirection={["up", "down", "left", "right"]}
onSwipeComplete={(e) => { setIsVisible(false); })
style={{ justifyContent: 'flex-end', margin: 0, }} >
<View style={{ backgroundColor: 'steelblue' }}>
<Text>Hello Modal</Text>
</View>
</Modal>
);
};
export {ModalComponent};
I was trying to position a button on the bottom right of the screen like the picture below:
So, basically I had a Scrollview with the button inside like so:
import React, { Component } from 'react'
import { ScrollView, Text, KeyboardAvoidingView,View,TouchableOpacity } from 'react-native'
import { connect } from 'react-redux'
import { Header } from 'react-navigation';
import CreditCardList from '../Components/credit-cards/CreditCardList';
import Icon from 'react-native-vector-icons/Ionicons';
import Button from '../Components/common/Button';
// Styles
import styles from './Styles/CreditCardScreenStyle'
import CreditCardScreenStyle from './Styles/CreditCardScreenStyle';
class CreditCardScreen extends Component {
render () {
return (
<ScrollView style={styles.container}>
<CreditCardList />
<TouchableOpacity style={CreditCardScreenStyle.buttonStyle}>
<Icon name="md-add" size={30} color="#01a699" />
</TouchableOpacity>
</ScrollView>
)
}
}
My styles:
import { StyleSheet } from 'react-native'
import { ApplicationStyles } from '../../Themes/'
export default StyleSheet.create({
...ApplicationStyles.screen,
container:{
marginTop: 50,
flex: 1,
flexDirection: 'column'
},
buttonStyle:{
width: 60,
height: 60,
borderRadius: 30,
alignSelf: 'flex-end',
// backgroundColor: '#ee6e73',
position: 'absolute',
bottom: 0,
// right: 10,
}
})
The problem is that the absolute positioning does not work at all when the button is inside the ScrollView. But...If I change the code to look like this:
import CreditCardScreenStyle from './Styles/CreditCardScreenStyle';
class CreditCardScreen extends Component {
render () {
return (
<View style={styles.container}>
<ScrollView >
<CreditCardList />
</ScrollView>
<TouchableOpacity style={CreditCardScreenStyle.buttonStyle}>
<Icon name="md-add" size={30} color="#01a699" />
</TouchableOpacity>
</View>
)
}
}
Then it works !! Whaat? Why? How? I don't understand why this is happening and I would appreciate any information about it.
This might be inconvenient but is just how RN works.
Basically anything that's inside the ScrollView (in the DOM/tree) will scroll with it. Why? Because <ScrollView> is actually a wrapper over a <View> that implements touch gestures.
When you're using position: absolute on an element inside the ScrollView, it gets absolute positioning relative to its first relative parent (just like on the web). Since we're talking RN, its first relative parent is always its first parent (default positioning is relative in RN). First parent, which in this case is the View that's wrapped inside the ScrollView.
So, the only way of having it "fixed" is taking it outside (in the tree) of the ScrollView, as this is what's actually done in real projects and what I've always done.
Cheers.
i suggest to use "react-native-modal".
you can not use position: 'absolute' to make elements full size in ScrollView
but you can do it by
putting that element in modal wrapper.
below are two examples. first one doesnt work but the second one works perfectly.
first way (doesnt work):
const app = () => {
const [position, setPosition] = useState('relative')
return(
<ScrollView>
<Element style={{position: position}}/>
<Button
title="make element fixed"
onPress={()=> setPosition('absolute')}
/>
</ScrollView>
)
}
second way (works perfectly):
const app = () => {
const [isModalVisible, setIsModalVisible] = useState(false)
return(
<ScrollView>
<Modal isModalVisible={isModalVisible}>
<Element style={{width: '100%', height: '100%'}}/>
</Modal>
<Button
title="make element fixed"
onPress={()=> setIsModalVisible(true)}
/>
</ScrollView>
)
}
for me this worked:
before:
<View>
<VideoSort FromHome={true} />
<StatisticShow style={{position:'absulote'}}/>
</View>
after:
<View>
<ScrollView>
<VideoSort FromHome={false} />
</ScrollView>
<View style={{position:'relative'}}>
<StatisticShow style={{position:'absulote'}}/>
</View>
</View>
I've been trying to render a background image, and it runs, but nothing appears. I'm running this through Android on Windows. This is the code below:
import React, { Component } from 'react';
import { View, Image, Text, ImageBackground } from 'react-native';
class Background extends Component {
render() {
return (
<ImageBackground
source={{uri: 'https://thumbs.dreamstime.com/b/purple-blue-textured-background-wallpaper-app-background-layout-dark-gradient-colors-vintage-distressed-elegant-78118630.jpg'}}
style={{flex: 1, width: '100%'}}
>
<View >
<Text>Test</Text>
</View>
</ImageBackground>
);
}
}
export default Background;
I'm not sure if the code just isn't properly pulling the image itself or if the styling needs to be adjusted. Thanks for the help!
Your ImageBackground component needs a height value in your style attribute. RN is picky about that.
import { ImageBackground } from 'react-native'
<ImageBackground
source={require('../assets/background.jpg')}
resizeMode={'cover'}
style={{ flex: 1, width: '100%' }}></ImageBackground>
Wrap your ImageBackground component within a Container component.
class Background extends Component {
render() {
return (
<Container>
<ImageBackground
source={{uri: 'https://thumbs.dreamstime.com/b/purple-blue-textured-background-wallpaper-app-background-layout-dark-gradient-colors-vintage-distressed-elegant-78118630.jpg'}}
style={{flex: 1, width: '100%'}}>
<View >
<Text>Test</Text>
</View>
</ImageBackground>
</Container>
);
}
}
for me only shows when i use
require()
like this post
ImageBackground not working when i call source from state
source={require( 'https://thumbs.dreamstime.com/b/purple-blue-textured-background-wallpaper-app-background-layout-dark-gradient-colors-vintage-distressed-elegant-78118630.jpg')}
(i tried to import image and call inside source but don't appears, even declaring in style height and width, only after use require(), why? i don't know)