We Keep Coding

How can I extend the scrollview beyond the screen length

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,
},
});

Reac-Native: hexagon with border

in my react native app I want to have a bordered hexagon, I'm trying to achive this by having two hexagons one before the other, however for the bigger hexagon(2) I can't seem to get the proper dimensions, I got the first hexagon from a post in this blessed site, can anyone help me?
<View style={{width:125,height:125,position:'relative',alignItems:'center',justifyContent:'center'}}>
<View style={styles.hexagon2}>
<View style={styles.hexagonInner2}>
<View style={styles.hexagonBefore2}></View>
</View>
<View style={styles.hexagonAfter2}></View>
</View>
<View style={{width:125,height:125,position:'absolute',top:0,left:0,alignItems:'center',justifyContent:'center'}}>
<View style={styles.hexagon}>
<View style={styles.hexagonInner}>
<View style={styles.hexagonBefore}></View>
</View>
<View style={styles.hexagonAfter}></View>
</View>
</View>
</View>
Hexagon styles:
const styles = StyleSheet.create({
//this one is the small hexagon, no need to touch this one
hexagon: {
width: 100,
height: 55
},
hexagonInner: {
width: 100,
height: 55,
backgroundColor: 'rgb(1,121,111)'
},
hexagonAfter: {
position: 'absolute',
bottom: -25,
left: 0,
width: 0,
height: 0,
borderStyle: 'solid',
borderLeftWidth: 50,
borderLeftColor: 'transparent',
borderRightWidth: 50,
borderRightColor: 'transparent',
borderTopWidth: 25,
borderTopColor: 'rgb(1,121,111)'
},
hexagonBefore: {
position: 'absolute',
top: -25,
left: 0,
width: 0,
height: 0,
borderStyle: 'solid',
borderLeftWidth: 50,
borderLeftColor: 'transparent',
borderRightWidth: 50,
borderRightColor: 'transparent',
borderBottomWidth: 25,
borderBottomColor: 'rgb(1,121,111)'
},
//This ine is the bigger hexagon, the border
hexagon2: {
width: 100,
height: 55,
},
hexagonInner2: {
width: 100,
height: 55,
backgroundColor: 'rgb(1,121,111)',
},
hexagonAfter2: {
position: 'absolute',
bottom: -25,
left: 0,
width: 0,
height: 0,
borderStyle: 'solid',
borderLeftWidth: 50,
borderLeftColor: 'transparent',
borderRightWidth: 50,
borderRightColor: 'transparent',
borderTopWidth: 25,
borderTopColor: 'red'
},
hexagonBefore2: {
position: 'absolute',
top: -25,
left: 0,
width: 0,
height: 0,
borderStyle: 'solid',
borderLeftWidth: 50,
borderLeftColor: 'transparent',
borderRightWidth: 50,
borderRightColor: 'transparent',
borderBottomWidth: 25,
borderBottomColor: 'red'
}
});

You can do this with the library react-native-svg which lets you make complicated shapes. Example I made here (https://snack.expo.dev/#heytony01/blissful-coffee)
and code below.
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import Svg, { Polygon } from 'react-native-svg';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
const Hexagon = () =>{
return (
<Svg height="300" width="300" >
<Polygon
points="00,150 225,280 75,280 0,150 75,20 225,20 300,150 225,280 75,280 0,150 75,20 225,20 300,150 225,280 75,280 0,150, 75 20 225,20"
fill="lime"
stroke="lime"
strokeWidth="1"
>
</Polygon>
</Svg>
)
}
export default function App() {
return (
<View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
<Hexagon />
</View>
);
}

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>

React style reusable component that is NOT styled-component

I have a reusable component that contains an animation called AnimationLoader. This component is a reusable component for loading states. I'm simply trying to take this component and use it inside of another component, UnpublishBlogBtn as the loader after a button click - that all works fine. However, I'd like to change the height and width of the animation inside of UnpublishBlogBtn and cannot for the life of me get that to work properly.
I've tried implementing Object.assign to bring in the CSS from the other file and just change the height and width. I've also tried just changing the CSS by doing <style={{}}> as well as wrapping the component in a div that has a style added(this appears to just change the button and not the animation itself).
<Button type="main" className="blogBtn">
{currentlyUnpublishingBlog ? <AnimatedLoader css={{ height: 1, width: 1 }}/> :
'Unpublish Blog'}
</Button>
const AnimatedLoader = () => {
return (
<div
css={{
height: 45,
width: 45
}}
>
<AnimatedIcon
css={{
animationDelay: '0.7s',
height: 35,
left: 10,
position: 'absolute',
top: 10,
width: 35
}}
/>
<AnimatedIcon
css={{
animationDelay: '0.7s'
display: 'none',
height: 45,
left: 0,
top: 0,
width: 45,
}}
/>
<div
css={{
borderRadius: 20,
borderStyle: 'solid',
borderWidth: 3,
height: 45,
position: 'absolute',
width: 45,
}}
/>
</div>
)
};
export default AnimatedLoader;
After user clicks on Unpublish Blog button, the loader should display as a smaller width and height on top of the button. Currently, it maintains the same size as what is listed inside of AnimatedLoader component and I'd like the size to change inside of the UnpublishBlogBtn component.

You can pass your css in as a prop to your AnimatedLoader
const AnimatedLoader = ({css={
height: 45,
width: 45
}}) => {
return (
<div
{...css}
>
<AnimatedIcon
css={{
animationDelay: '0.7s',
height: 35,
left: 10,
position: 'absolute',
top: 10,
width: 35
}}
// ....
If you need to do more complex things, it's probably more sensible to pass in a prop that describes the different style options as a group. So isSmallSize as a boolean or different sizes as an enum etc.
Then in your component you adjust the styles depending on the prop.
const AnimatedLoader = ({ isSmallSize = false }) => {
const outerSize = isSmallSize ?
{ height: 45, width: 45 } : { height: 1, width: 1 }
const iconSize = isSmallSize ?
{ height: 35, width: 35 } : { height: 1, width: 1 }
return (
<div css={{ ...outerSize }}>
<AnimatedIcon
css={{
animationDelay: '0.7s',
left: 10,
position: 'absolute',
top: 10,
...iconSize
}}
/>
<AnimatedIcon
css={{
animationDelay: '0.7s',
display: 'none',
left: 0,
top: 0,
...iconSize
}}
/>
<div
css={{
borderRadius: 20,
borderStyle: 'solid',
borderWidth: 3,
position: 'absolute',
...iconSize
}}
/>
</div>
)
}

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