Could you suggest a starting point or reference library to have a carousel/intro-slider where the effect is not of slide but of overriding. For example, if you check this image it is quite close, but upon slide previous image slide left too. What I want is an overriding kind of impact such that only the new layer slides and covers the one if scrolled over 50% else slides back.
I recommend react-native-viewpager for you.
Installing
yarn add #react-native-community/viewpager
Usage
import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
import ViewPager from '#react-native-community/viewpager';
const MyPager = () => {
return (
<ViewPager style={styles.viewPager} initialPage={0}>
<View key="1">
<Text>First page</Text>
</View>
<View key="2">
<Text>Second page</Text>
</View>
</ViewPager>
);
};
const styles = StyleSheet.create({
viewPager: {
flex: 1,
},
});
Related
I have a bottom bar like in the picture, but this bar prevents the bottom of my pages from appearing. How can I give the bottom of the page as much space like the height of the bottom bar? Thanks in advance.
This is something similar I did with but with the StatusBar. It should be very similar.
// component which allows view to remain within the safe area of a phone based on its platform
import React from "react";
import Constants from "expo-constants";
import { SafeAreaView, StyleSheet, View } from "react-native";
function Screen({ children, style }) {
return (
<SafeAreaView style={[styles.screen, style]}>
<View style={[styles.view, style]}>{children}</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
screen: {
paddingTop: Constants.statusBarHeight,
// prevents cutoff when scrolling, grows components with the entire screen
flex: 1,
},
view: {
flex: 1,
},
});
So, since you're trying to do the same thing with the tab bar, I suggest first getting the height of the tab bar (or the extra styling you put over the tab bar) and build a Screen component to encapsulate everything you want to put on the screen:
import React from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
function Screen({ children, style }) {
return (
<SafeAreaView style={[styles.screen, style]}>
<View style={[styles.view, style]}>{children}</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
screen: {
paddingBottom: <INSERT HEIGHT HERE>,
// prevents cutoff when scrolling, grows components with the entire screen
flex: 1,
},
view: {
flex: 1,
},
});
I'm currently working on an app prototype with react native. There's a lot out there on how to change the color of a component, here Touchable or Pressable, when pressing it (=> onPress).
But how do i change the backgroundcolor of such a component permanently after clicking – with onPressOut?.
Example:
simple "Click me" component that has a green background by default. If clicked once, it should change to a red background. Clicked once again, it should go back to green (and so on).
Can you help me with this?
You need to control it using the state of component.
I did a live demo for you:
https://codesandbox.io/s/silent-sea-5331l?file=/src/App.js
import React, { useState } from "react";
import { View, TouchableOpacity } from "react-native";
const App = props => {
const [selected, setSelected] = useState(false);
return (
<View style={{ width: "30%", alignItems: "center", marginTop: 20 }}>
<TouchableOpacity
onPress={() => setSelected(!selected)}
style={{ backgroundColor: selected ? "red" : "transparent" }}
>
Press me
</TouchableOpacity>
</View>
);
};
export default App;
I am trying to randomly display images from a local file that have been stored in an array in a Card component which is then rendered in the App, the root of the application.
Here is the Images file containing an array of images in the same directory.
const woolyImages = [
require('images/wooly1'),
require('images/wooly2'),
require('images/wooly3'),
require('images/wooly4'),
require('images/wooly5'),
];
export default woolyImages;
Here is the Card component where I attempt to pick a random image from the array and display it using the Image component via 'source'.
import React from 'react';
import {Image, View, StyleSheet} from 'react-native';
import woolyImages from '../images/Images';
function Card() {
const randomImage =
woolyImages[Math.floor(Math.random() * woolyImages.length)];
console.log(randomImage);
return (
<View style={styles.cardContainer}>
<Image source={randomImage} />
</View>
);
}
const styles = StyleSheet.create({
cardContainer: {
width: '50%',
height: '35%',
backgroundColor: 'pink',
},
});
export default Card;
(I inserted the pink background so I could be sure it was rendering in the view. It is.)
Finally, here is the root of the application where I render the card.
import React from 'react';
import {View, StyleSheet} from 'react-native';
import Header from './components/Header';
import Card from './components/Card';
import GenerateWoolyButton from './components/GenerateWoolyButton';
function App() {
return (
<View style={styles.container}>
<Header />
<Card />
<GenerateWoolyButton style={styles.button} />
</View>
);
}
const styles = StyleSheet.create({
container: {
justifyContent: 'flex-start',
alignItems: 'center',
flex: 1,
},
});
export default App;
I am getting the below error.
Can anyone please tell me how to display a randomly generated picture in the Card component and display it in the root of my application? Thank you.
You need to add width & height styles to Image of your Card Component. Such as,
<Image source={randomImage} style={{height: 200, width: 200}} />
Hope this will helps you. Feel free for doubts.
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 am having an issue with the image just showing up on the application. Through search results, I mostly see the solution being that that the height and width was required and missing, but I have already implemented with no results.
I have looked at the routes multiple times and don't see any issues on that end.
Lastly, I thought it could be something to do with the image. I have altered the size and it worked with the <Image /> tag. However, I need it to be a background image.
Current Code
import React from 'react'
import { View, Text, StyleSheet, ImageBackground } from 'react-native';
import { MaterialCommunityIcons } from '#expo/vector-icons'
export default function TitleScreen () {
return (
<View>
<ImageBackground
source={require('../assets/images/title_background.png')}
style={styles.backgroundImage}
imageStyle={{resizeMode: 'cover'}}
>
<Text>testing</Text>
{/* <MaterialCommunityIcons
name={'cards-outline'}
size={100}
/> */}
</ImageBackground>
</View>
)
}
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
width: '100%',
height: '100%',
}
});
Folder Layout
assets
-- images
--- title_background.png
components
-- TitleScreen.js
Answered! The answer was to add flex: 1 to the parent view container - for those running into the same problem.