How can I extend the scrollview beyond the screen length - javascript

I am trying to make a Netflix clone with react native and I put the home screen in a scrollview but when I add more content under the banner image and try to scroll down, it just snaps back up and won't stay there. I tried adding padding on the bottom but it still won't work.
import React from "react";
import {
StyleSheet,
View,
ScrollView,
ImageBackground,
} from "react-native";
import ContinueWatching from "../components/ContinueWatching";
import Header from "../components/Header";
import NavBar from "../components/NavBar";
import PlayBar from "../components/PlayBar";
const Home = () => {
return (
<View style={styles.container}>
<ScrollView>
<Header />
<NavBar />
<ImageBackground
style={styles.bannerImage}
source={{
uri: "https://i2.wp.com/technosports.co.in/wp-
content/uploads/2021/10/squid-scaled.jpg?fit=1920%2C2560&ssl=1",
}}
/>
<View style={styles.blendBottom}></View>
<View style={[styles.blendBottom, { top: 480, opacity: 0.65 }]}></View>
<PlayBar />
<ContinueWatching />
</ScrollView>
</View>
);
};
export default Home;
const styles = StyleSheet.create({
container: {
backgroundColor: "black",
flex: 1,
},
bannerImage: {
flex: 1,
height: 500,
width: 410,
resizeMode: "contain",
right: 10,
},
blendBottom: {
height: 60,
width: "100%",
backgroundColor: "black",
position: "absolute",
top: 460,
opacity: 0.25,
},
});

Related

React Native with Expo - Keyboard compressing elements

On one screen there are 2 images in svg path format, 2 textinputs and a button. One image is at the top, and another at the bottom. Whenever I click on a textinput, the keyboard pushes the images and compresses all the elements. How could I solve it?
The project was created using Expo.
index.js
import React, {Component} from 'react';
import {View, Text, TextInput, TouchableOpacity} from 'react-native';
import Style from './style';
/* SVG Imports */
import PesqueiraOnline from '../../utils/pesqueira-online-path';
import Illustration from './svg-illustration';
export default class Login extends Component {
render(){
return(
<>
<View style={Style.pesqueiraonline}>
<PesqueiraOnline />
</View>
<View style={Style.container}>
<Text style={Style.texto}>Faça login para começar a fazer suas compras!</Text>
<TextInput style={Style.loginInputs} placeholder="CPF" placeholderTextColor="#B4B4B4" />
<TextInput style={Style.loginInputs} placeholder="Senha" placeholderTextColor="#B4B4B4" />
<TouchableOpacity style={Style.loginButton}>
<Text style={Style.textLoginButton}>ENTRAR</Text>
</TouchableOpacity>
</View>
<View style={Style.illustration}>
<Illustration />
</View>
</>
);
}
}
style.js
import { StyleSheet } from 'react-native';
export default Style = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
//backgroundColor: '#e1e1e1',
marginBottom: 75
},
texto: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: '#333'
},
/* Pesqueria Online */
pesqueiraonline: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
alignSelf: 'center',
marginTop: 50,
width: '100%',
height: undefined,
},
/* Illustration */
illustration: {
flex: 1,
alignItems: 'center',
marginBottom: 35,
marginRight: 30
},
/* Login Inputs */
loginInputs: {
width: 267,
height: 45,
borderRadius: 20,
borderWidth: 1,
borderColor: '#BDBDBD',
marginTop: 15,
paddingLeft: 15
},
/* Login Button */
loginButton: {
backgroundColor: '#6FCF97',
borderRadius: 20,
width: 113,
height: 48,
marginTop: 15,
justifyContent: 'center',
alignItems: 'center'
},
textLoginButton: {
color: '#fff',
fontWeight: 'bold'
}
});
A gif showing the problem:

Image Overlay using JS styling

Currently, I am trying to place an overlay on top of a background image. For some reason I just can't seem to get the background color to lay on top of the image. Any suggestions would be greatly appreciated. I am using a lot of Material UI etc, so my styling is done using JS.
import React from 'react'
import Background from '../images/background.jpg'
// MUI STUFF
import Grid from '#material-ui/core/Grid'
import Container from '#material-ui/core/Container'
import Box from '#material-ui/core/Box'
import { makeStyles } from '#material-ui/core/styles'
const useStyles = makeStyles(theme => ({
background: {
backgroundImage: `url(${Background})`,
position: 'relative',
objectFit: 'cover',
width: '100%',
height: 400,
paddingTop: 70,
margin: 0
},
card: {
width: '100%'
},
overlay: {
position: 'absolute',
objectFit: 'cover',
width: '100%',
height: 400,
margin: 0,
backgroundColor: '#5BC2E7'
}
}))
const Home = () => {
const classes = useStyles()
return (
<Box>
<div className={classes.overlay}>
<Box className={classes.background}>
<Container>
Wyncode is so great and stuff. Track your jobs and stuff here.
</Container>
</Box>
</div>
<Box>
<Container>More stuff will go here</Container>
</Box>
</Box>
)
}
export default Home
try this css:
background: {
backgroundImage: `url(${Background})`,
position: 'relative',
objectFit: 'cover',
width: '100%',
height: 400,
paddingTop: 70,
margin: 0
},
overlay: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
margin: 0,
backgroundColor: '#5BC2E7'
}
With this html:
<Box>
<Box className={classes.background}>
<div className={classes.overlay}>
<Container>
Wyncode is so great and stuff. Track your jobs and stuff here.
</Container>
</div>
</Box>
<Box>
<Container>More stuff will go here</Container>
</Box>
</Box>

LinearGradient above ImageBackground in react-native expo

In my react-native expo app, i have a background image that is taking full height and width in all screens and i want to put a lineargradient above the background image but it's not working, the image is always appearing above the gradient, here is the code:
import React, { Component } from 'react';
import { LinearGradeint } from 'expo';
import { Text, StyleSheet, ImageBackground } from 'react-native';
class App extends Component {
render() {
return(
<View style={styles.container}>
<LinearGradient
colors={['#4c669f', '#3b5998', '#192f6a']}>
<ImageBackground source={require('./images/background.jpg')} style={styles.backgroundImage}>
<View style={{width: "100%"}}>
<Text>
HI
</Text>
</View>
</ImageBackground>
</LinearGradient>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
backgroundImage: {
height: '100%',
width: '100%',
flex: 1,
},
export default App;
Try to put LinearGradient component inside ImageBackground.
<ImageBackground source={require('./images/background.jpg')} style={styles.backgroundImage}>
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} />
<View style={{width: "100%"}}>
</View>
</ImageBackground>
Add absolute position on the LinearGradient :
<LinearGradient
colors={['#4c669f', '#3b5998', '#192f6a']}
style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
height: '100%'
}}
/>
This worked for me:
<ImageBackground
source={require('../../assets/img/background.png')}
resizeMode="cover"
style={{
height: '100%',
width: '100%',
flex: 1,
}}>
<LinearGradient
colors={[
'rgba(255,180,113,0.75)',
'rgba(255,107,11,0.75)',
'rgba(255,180,113,0.75)',
]}
style={{flex: 1, justifyContent: 'center'}}>
{** CODE **}
</LinearGradient>
</ImageBackground>

how to get React native code working in visual studio

*****I ran this react native code in expo .snack and the code ran flawlessly but when i run it in visual studio code to my iPhone it dosent seem to
work here is the error get is there anything i can do to get the code
to work.**
unexpected token 42:2
here is the code im running for the app***
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image,ImageBackground,button,
TouchableOpacity, Dimensions,Button} from 'react-native';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default class App extends Component {
render() {
return (
<View style={{flexDirection: "row"}}>
<ImageBackground source={{uri: 'https://lumiere-a.akamaihd.net/v1/images/usa_avengers_sb_bkgd8_1024_0ae5b001.jpeg?region=0%2C0%2C1024%2C576'}}
style={{width: width, height: height,flexDirection:'colum'}}>
<TouchableOpacity style={styles.spiderman}>
<Image source={{uri: 'http://www.pngmart.com/files/2/Spider-Man-Transparent-Background.png'}}
style={{width: 200, height:300,}} />
</TouchableOpacity>
<TouchableOpacity style={styles.hulk}>
<Image source={{uri:
'https://vignette.wikia.nocookie.net/avengers-assemble/images/d/d6/Usa_avengers_skchi_blackwidow_n_6e8100ad.png/revision/latest/scale-to-width-down/449?cb=20170426073401'}}
style={{width: 150, height: 80, position:'top',}} />
</TouchableOpacity>
<TouchableOpacity style={styles.blkwidow}>
<Image source={{uri: 'https://clipart.info/images/ccovers/1516942387Hulk-Png-Cartoon.png'}}
style={{width: 200, height: 250}} />
</TouchableOpacity>
</ImageBackground>
</View>
);
}
}
///need help with coloring each icon
const styles = StyleSheet.create({
spiderman: {
flex: 1,
position:'left',
alignItems: 'flex-end',
justifyContent: 'center',
width: 50,
height: 500,
bottom: -140,
left: Dimensions.get('window').width -10,
zIndex: 10,
},
blkwidow: {
flex: 1,
position:'left',
alignItems: 'flex-end',
justifyContent: 'flex-end',
width: 50,
height: 50,
bottom: 50,
left: Dimensions.get('window').width - 70,
zIndex: 10,
},
});
Your code needs to be reviewed. I have corrected the errors. See the code.
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Image,
ImageBackground,
//button - Not a component of react-native
TouchableOpacity,
Dimensions,
Button
} from 'react-native';
const width = Dimensions
.get('window')
.width;
const height = Dimensions
.get('window')
.height;
export default class App extends Component {
render() {
return (
<View style={{
flexDirection: "row"
}}>
<ImageBackground
source=
{ { uri: 'https://lumiere-a.akamaihd.net/v1/images/usa_avengers_sb_bkgd8_1024_0ae5b001.jpeg?region=0%2C0%2C1024%2C576' } }
style={{
width: width,
height: height,
flexDirection: 'column'
}}>
<TouchableOpacity >
<Image
style={{
width: 200,
height: 200
}}
source={{
uri: 'http://www.pngmart.com/files/2/Spider-Man-Transparent-Background.png'
}}/>
</TouchableOpacity>
<TouchableOpacity >
<Image
style={{
width: 150,
height: 80,
//position: 'top' - position should be either absolute or relative
}}
source={{
uri: 'https://vignette.wikia.nocookie.net/avengers-assemble/images/d/d6/Usa_avengers_skchi_blackwidow_n_6e8100ad.png/revision/latest/scale-to-width-down/449?cb=20170426073401'
}}/>
</TouchableOpacity>
<TouchableOpacity >
<Image
style={{
width: 200,
height: 250
}}
source={{
uri: 'https://clipart.info/images/ccovers/1516942387Hulk-Png-Cartoon.png'
}}/>
</TouchableOpacity>
</ImageBackground>
</View>
);
}
}
///need help with coloring each icon
const styles = StyleSheet.create({
spiderman: {
flex: 1,
position: 'relative',
alignItems: 'flex-end',
justifyContent: 'center',
width: 50,
height: 500,
bottom: -140,
left: Dimensions
.get('window')
.width - 10,
zIndex: 10
},
blkwidow: {
flex: 1,
position: 'relative',
alignItems: 'flex-end',
justifyContent: 'flex-end',
width: 50,
height: 50,
bottom: 50,
left: Dimensions
.get('window')
.width - 70,
zIndex: 10
}
});
you are improting button that is not true,you have to write Button and just once

React native zIndex not working on Views

Somehow react native zIndex fails to work on this piece of code...
<View>
<View style={{backgroundColor: 'red', width: 100, height: 100, zIndex: 1, position: 'absolute', top: 0, right: 0}}/>
<View style={{backgroundColor: 'blue', width: 50, height: 50, zIndex: 0, position: 'absolute', top: 0, right: 0}}/>
</View>
If anyone can explain to me why this is "not working" that would be great!
(btw, this is on Android React-native version 0.45.1)
This is my workflow atm:
index.android.js
import React from 'react-native';
import Viewport from './app/Viewport';
React.AppRegistry.registerComponent('TSK', () => Viewport);
Viewport.js
import React, { Component } from 'react';
import {
AppRegistry,
View,
StyleSheet
} from 'react-native';
// Viewport
export default class Viewport extends Component {
render() {
return (
<View>
<View style={{backgroundColor: 'red', width: 100, height: 100, zIndex: 1, position: 'absolute', top: 0, right: 0}}/>
<View style={{backgroundColor: 'blue', width: 50, height: 50, zIndex: 0, position: 'absolute', top: 0, right: 0}}/>
</View>
);
}
}
AppRegistry.registerComponent('Viewport', () => Viewport);

Categories