import React, { useState, useEffect, useRef } from 'react';
import { StyleSheet, View, Text, Animated, UIManager, findNodeHandle, PanResponder } from 'react-native';
const TestScreen = props => {
const myPosition = useRef();
const enemyPosition = useRef();
return (
<View style={styles.main}>
<View style={styles.screenLeft}>
<Animated.View ref={myPosition}>
<View style={styles.fighter} >
</View>
</Animated.View>
</View>
<View style={styles.screenRight}>
<Animated.View ref={enemyPosition}>
<View style={styles.enemy}>
</View>
</Animated.View>
</View>
</View>
);
}
const styles = StyleSheet.create({
main: {
flex: 1,
},
screenLeft: {
alignItems: 'flex-start',
position: 'absolute'
},
screenRight: {
alignItems: 'flex-end'
},
fighter: {
backgroundColor: '#000',
width: 20,
height: 50
},
enemy: {
backgroundColor: '#ff0000',
width: 20,
height: 50
}
});
export default TestScreen;
enter image description here
Please use Dimensions
import { Dimensions } from 'react-native';
Then get the windowWidth
const windowWidth = Dimensions.get('window').width;
According to your case, it should be windowWidth - 40
= windowWidth -20 (the left hand side box) -20 (the right hand side box)
Related
I am trying to make a gradient slider for my app in react-native, but I keep getting the message' requireNativeComponent : "BVLinearGradient" was not found in the UIManager' when I run my code.
I tried adding different libraries and other methos that poeple used to fix the same problem. But nothing works.
import React, { useState, useEffect} from "react";
import {AppRegistry, StyleSheet, Text, View, TouchableOpacity,
SafeAreaView, Image, useWindowDimensions, onPress, TextInput,
Animated} from 'react-native';
import { useNavigation, getStateFromPath } from '#react-
navigation/native';
import Slider from '#react-native-community/slider'
import { firebase } from '../config'
import Logo from '../assets/temporaryLogoApp.png'
import MultiSlider from '#ptomasroos/react-native-multi-slider'
import LinearGradient from 'react-native-linear-gradient';
const SliderScreen = () => {
const [value, setValue] = useState(0);
return(
<View>
<Text style={styles.hoi}>
hoi
</Text>
<View
style={{
width: 100,
height: 100,
backgroundColor: value === 2 ? 'green' : 'grey',
}}
/>
</View> */}
<View style={styles.container}>
<LinearGradient
colors={['#ff0000', '#00ff00', '#0000ff']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={styles.gradient}
>
<Slider
minimumValue={0}
maximumValue={1}
value={value}
onValueChange={setValue}
style={styles.slider}
thumbTintColor="#fff"
minimumTrackTintColor="#transparent"
maximumTrackTintColor="#transparent"
/>
</LinearGradient>
<Text>Value: {value}</Text>
</View>
</View>
)
}
export default SliderScreen
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
gradient: {
height: 40,
width: '100%',
borderRadius: 20,
overflow: 'hidden',
},
slider: {
transform: [
{
translateX: -20,
},
],
},
});
I am trying to make a reusable text input component, but I want to grab the value that the user types to manipulate it on the App.js
TextInputComponent.js
import React, {useState} from 'react';
import { StyleSheet, View, TextInput } from 'react-native'
const TextInputComponent = (props) => {
const [text, onChangeText] = useState("")
return (
<View>
<TextInput style={styles.container} value={text} onChangeText={onChangeText} placeholder="Enter"/>
</View>
)
}
const styles = StyleSheet.create({
container: {
height: 50,
width: 200,
padding: 10,
margin: 10,
borderWidth: 1,
borderColor: "black",
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default TextInputComponent
App.js
import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
import TextInputComponent from './src/components/TextInputComponent';
export default function App() {
return (
<View style={styles.container}>
<View style={{flexDirection: 'row' }}>
<Text>Test</Text>
<TextInputComponent/>
<Button title="A" onPress={()=> console.log(-------> text value from TextInputComponent <-----)}></Button>
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
In order to access the state value created on the TextInputComponent.js what do I need to do?
One thing you can do is to pass a custom method through to the component and then use it as the onChangeText method:
const TextInputComponent = ({ customMethod }) => {
const [text, onChangeText] = useState("")
return (
<View>
<TextInput style={styles.container} value={text} onChangeText={(txt) => customMethod(txt)} placeholder="Enter"/>
</View>
)
}
Then in App.js you have the method:
customMethod = (txt) => {
// do something with txt variable
}
and:
<TextInputComponent customMethod={customMethod} />
Might require some tweaking to get it to work (I didn't test it), but that's the general idea.
When I use the ScrollView with contents that have flex they don't show and flex doesn't seem to work. How do you get flex to work inside a ScrollView?
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
ScrollView,
TouchableOpacity,
Dimensions,
} from 'react-native';
const App = (props) => {
return (
<ScrollView style={styles.body}>
<View style={styles.box1} />
<View style={styles.box2} />
<View style={styles.box1} />
</ScrollView>
);
};
const styles = StyleSheet.create({
body: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#fff',
borderColor: 'red',
borderWidth: 5
},
box1: {
flex: 1,
backgroundColor: 'blue',
},
box2: {
flex: 2,
backgroundColor: 'purple',
}
});
export default App;
I've created a snack. The inner views/boxes don't show.
I managed to figure it out. You create another view inside the scrollView and fix the height. The only problem is that the size of the content views depends on the height of this view instead of the height of the scrollView.
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
ScrollView,
TouchableOpacity,
Dimensions,
} from 'react-native';
// import { useHeaderHeight } from '#react-navigation/stack';
const App = (props) => {
let screenHeight = Dimensions.get('window').height;
// let headerHeight = useHeaderHeight();
let headerHeight = 0
let bodyHeight = screenHeight - headerHeight + 500;
return (
<ScrollView style={styles.body}>
<View style={[styles.innerBody, { height: bodyHeight }]}>
<View style={styles.box1} />
<View style={styles.box2} />
<View style={styles.box1} />
</View>
</ScrollView>
);
};
const styles = StyleSheet.create({
body: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#fff',
},
innerBody: {
borderColor: 'red',
borderWidth: 5
},
box1: {
flex: 1,
backgroundColor: 'blue',
},
box2: {
flex: 2,
backgroundColor: 'purple',
}
});
export default App;
Heres a snack showing it working.
Could you please look into what i'm missing with scrollview configuration.
I'm trying to create a scrollview animation with starting card-child offset by half of device-width, then when the user scrolls, it should align center and as should other rest of the scrollview-children
Basically all children when scrolled should align in center. Also first child should start at the end of the device width.
progress so far -> https://snack.expo.io/#sefeniyuk/scrollview-alignment
thank you.
import * as React from 'react';
import { Text, View, StyleSheet, ScrollView, Dimensions, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
const { width } = Dimensions.get('window');
const cardPaddingHorizontal = 2;
const cardWidth = width - cardPaddingHorizontal * 2;
const cardleftOffset = width - cardWidth / 3.5;
const initialCardShown = width - cardleftOffset;
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
scrollEventThrottle={1}
style={styles.style}
contentContainerStyle={styles.contentContainerStyle}
snapToAlignment="center"
decelerationRate="fast"
>
{[1, 2, 3, 4].map((num, i) => {
return (
<TouchableOpacity key={i} style={styles.card}>
<View style={styles.content}>
<Text style={styles.text}>{num}</Text>
</View>
</TouchableOpacity>
);
})}
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
contentContainerStyle: {
width: cardWidth * 4
},
style: {
paddingLeft: cardleftOffset
},
card: {
backgroundColor: 'red',
width: cardWidth,
height: cardWidth,
margin: cardPaddingHorizontal,
elavation: 10
},
content: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
text: {
fontSize: 40,
color: 'white'
}
});
You can use react state hooks in functional components. You can either a give width for the starting scroll position or the best way is to use
scrollViewRef.current.scrollToIndex({ index: "index-of-item" })
import React, {useRef} from 'react'
const App = () => {
const scrollViewRef = useRef();
return (
<ScrollView horizontal={true} ref={scrollViewRef}
onContentSizeChange=
{() => scrollViewRef.current.scrollTo({x: giveWidth, y:
giveHeight, animated: true})}>
.
.
.
.
</ScrollView>
);
}
My app has a background image which has a slightly transparent view placed over it to provide a blue tint to the background image. I am now trying to place the app logo on top of these views but when I do so the logo appears to take on the opacity of the view providing the tint.
I am very new to react native but what I basically need is to have: background image > view > logo.
To demonstrate what I mean, the app logo should look like this:
But it currently looks washed out, like this:
App.js
import React, { Component } from 'react';
import { View, Text, ImageBackground } from 'react-native';
import Logo from './Logo';
class App extends Component {
render() {
return (
<ImageBackground
source={require('./images/city.png')}
style={styles.backgroundStyle}
>
<View style={styles.backgroundOverlayStyle}>
<Logo />
</View>
</ImageBackground>
);
}
}
const styles = {
backgroundStyle: {
flex: 1,
backgroundColor: '#000000',
width: '100%',
height: '100%'
},
backgroundOverlayStyle: {
flex: 1,
backgroundColor: '#003284',
opacity: 0.5
}
};
export default App;
Logo.js
import React from 'react';
import { View, Image } from 'react-native';
const Logo = () => {
const { logoStyle } = styles;
return (
<View style={styles.container}>
<Image style={logoStyle} source={require('./images/request-first-logo-white.png')} />
</View>
);
};
const styles = {
container: {
alignItems: 'center',
justifyContent: 'center',
opacity: 1,
},
logoStyle: {
width: '70%',
height: '65%',
resizeMode: 'contain',
//backgroundColor: 'blue'
}
};
export default Logo;
Thank you for any help.
you need you define blurRadius for ImageBackground
import React, { Component } from 'react';
import { View, Text, ImageBackground,Image } from 'react-native';
const Logo = () => {
const { logoStyle } = styles;
return (
<View style={styles.container}>
<Image style={logoStyle} source={{uri:'https://www.what-dog.net/Images/faces2/scroll001.jpg'}} />
</View>
);
};
export default class App extends Component {
render() {
return (
<ImageBackground
source={{uri : 'https://pngstocks.com/wp-content/uploads/2018/03/cb-background-10.jpeg'}}
style={styles.backgroundStyle}
blurRadius={30}
>
<Logo />
</ImageBackground>
);
}
}
const styles = {
backgroundStyle: {
flex: 1,
backgroundColor: '#000000',
width: '100%',
height: '100%'
},
backgroundOverlayStyle: {
flex: 1,
backgroundColor: '#003284',
},
container: {
alignItems: 'center',
justifyContent: 'center',
},
logoStyle: {
width: 100,
height: 100,
resizeMode: 'contain',
//backgroundColor: 'blue'
}
};