I want to create a View bigger than the screen with react native directly to works in android and ios, why do i want to create it? because i want to create a swipe at the item on the list
import React from "react";
import { View, Text } from "react-native";
const ViewBoxesWithColorAndText = () => {
return (
<View>
<View style={{ backgroundColor: "red", flex: 0.5 }} />
<Text>Hello World!</Text>
</View>
);
};
export default ViewBoxesWithColorAndText;
Here are the screen dimensions.
import { Dimensions } from 'react-native'
const Window = Dimensions.get('window')
const Screen = Dimensions.get('screen')
const WIDTH = Screen.width
const HEIGHT = Screen.height
const FONT_SCALE = Window.fontScale
const SCREEN_SCALE = Window.scale
I hope, these what you wanted.
Related
I'm calculating snap points for React Native Bottom Sheet and facing an issue in Android devices. The calculation doesn't work universally to find sheetEndSnap. The StatusBar.currentHeight value needs to be considered for some devices. For others, it does not need to be considered. I can't figure out what is causing this issue and how to differentiate the sheetEndSnap calculation based on devices.
The current implementation is like this.
import React, {useMemo, useRef} from 'react';
import {Dimensions, View, StatusBar, Platform} from 'react-native';
import BottomSheet from '#gorhom/bottom-sheet';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
const {height: windowHeight} = Dimensions.get('window');
const statusBarHeight = Platform.OS === 'android' ? StatusBar.currentHeight : 0;
const sheetStartSnap = 200;
const Screen = () => {
const {top, bottom} = useSafeAreaInsets();
const ref = useRef < BottomSheet > null;
const sheetEndSnap = windowHeight - (top + bottom + statusBarHeight); // For some devices this works fine
// const sheetEndSnap = windowHeight - (top + bottom); // For other devices this works fine
const snapPoints = useMemo(() => [sheetStartSnap, sheetEndSnap], [sheetEndSnap]);
return (
<View style={{flex: 1}}>
<BottomSheet ref={ref} index={0} snapPoints={snapPoints}>
<View style={{flex: 1}} />
</BottomSheet>
</View>
);
};
I am at a loss, my image is huge and just goes off the screen and you can't see it. It's just a ScrollView that shows a bunch of scans of pages from a book. I can vertically scroll and see the rest of the image but I just cannot get it to be contained within the view. I'm using iOS, My code is below
import React from 'react';
import { WebView } from 'react-native-webview'
import { ScrollView, Image, View, StyleSheet, Dimensions } from 'react-native';
const StandardizationScreen = ({ navigation }) => {
return (
<ScrollView style={{flex: 1}} contentContainerStyle={{alignItems: "center"}}>
<View style={{flex: 1}}><Image style={styles.image} source={require('../assets/standardization/3982243bbc574ccbad697528ff26f605-52.png')}/></View>
</ScrollView>
)
}
const win = Dimensions.get('window');
const styles = StyleSheet.create({
image: {
width: win.width
}
})
export default StandardizationScreen;
You can use resizeMode = 'contain'
const styles = StyleSheet.create({
image: {
width: win.width,
resizeMode:'contain'
}
})
I am using Expo and React Native and I want to display a Lottie animation. On iOS this works like a charm - on Android the animation will play once and then it will not play again. It seems that reset() somehow behaves strange.
What am I doing wrong here? You can also have a look at a corresponding Expo snack.
import { Button, View } from 'react-native';
import React, { useRef } from 'react';
import LottieView from 'lottie-react-native';
import likeAnimation from './assets/animation.json';
export default function App() {
const animation = useRef(null);
const onPress = () => {
animation.current.play();
};
const onAnimationFinish = () => {
animation.current.reset();
}
return (
<View style={{ paddingTop: 200, backgroundColor: '#dddddd', flex: 1 }}>
<LottieView
loop={false}
speed={1.5}
autoSize
ref={animation}
source={likeAnimation}
onAnimationFinish={onAnimationFinish}
/>
<Button onPress={onPress} title="Click me!" />
</View>
);
}
I am a beginner in React-Native.
I tried to change the state value.
But it seems different with "class" mode. Now I am using "const" mode.
In const mode, how can I change the state value?
import React from "react";
import {
View,
Text,
Image,
TouchableOpacity
} from "react-native";
const Product = props => {
this.state = {
checkIconURL : require('../../assets/ic_check_circle.png')
}
set = () => {
this.setState({ checkIconURL : require('../../assets/empty.png') }) //But this lines gives err.
}
return (
<View>
<Text style={{ fontSize: 16}}>Everyday</Text>
<TouchableOpacity onPress = {this.set}>
<Image source = {this.state.checkIconURL} style={{width: 30, height: 30}} />
</TouchableOpacity>
</View>
)
}
state is not available in function components, this.state and this.setState() can only be used in class component, u have to use useState hook from react to use the state...
import React ,{ useState } from "react";
import {
View,
Text,
Image,
TouchableOpacity
} from "react-native";
const Product = props => {
const initialState = require('../../assets/ic_check_circle.png');
const [iconUrl, setIconUrl ] = useState(initialState);
const set = () => {
const emptyImageUrl = require('../../assets/empty.png')
setIconUrl(emptyImageUrl);
}
return (
<View>
<Text style={{ fontSize: 16}}>Everyday</Text>
<TouchableOpacity onPress = {set}>
<Image source = {iconUrl} style={{width:
30, height: 30}} />
</TouchableOpacity>
</View>
)
}
the following code is incorrect as you need to use Hook in a functional component to manage state.
React provides the useState hook to manage state in a functional component.
import React ,{ useState } from "react";
import {
View,
Text,
Image,
TouchableOpacity
} from "react-native";
const Product = props => {
const initialState = require('../../assets/ic_check_circle.png');
const [ state,setState ] = useState({checkIconURL: initialState});
set = () => {
const emptyImageUrl = require('../../assets/empty.png') });
setState({...state, checkIconURL: emptyImageUrl })
}
return (
<View>
<Text style={{ fontSize: 16}}>Everyday</Text>
<TouchableOpacity onPress = {this.set}>
<Image source = {this.state.checkIconURL} style={{width:
30, height: 30}} />
</TouchableOpacity>
</View>
)
}
Im learing React native but i dont understand how to get everything to not overlap with the status bar.
I have tried
translucent={true/flase}
hidden
This is expected behaviour, one solution is to add a padding to your top level view equal to current height of status bar or have a StatusBarView that has same height as the status bar.
Refer to this plugin https://github.com/jgkim/react-native-status-bar-size for listening to status bar height changes.
For e.g
import _ from 'lodash';
import React, { Component } from 'react';
import { View, StatusBar} from 'react-native';
import StatusBarSizeIOS from 'react-native-status-bar-size';
const STATUS_BAR_EXTRA_PADDING = 2;
const DEFAULT_STATUS_BAR_HEIGHT = 10;
class StatusBarView extends Component {
state = {
statusBarHeight: _.get(StatusBarSizeIOS, 'currentHeight', DEFAULT_STATUS_BAR_HEIGHT);
}
_handleStatusBarSizeDidChange = (statusBarHeight) => this.setState({ statusBarHeight })
componentDidMount() {
StatusBarSizeIOS.addEventListener('didChange', this._handleStatusBarSizeDidChange);
}
render() {
return (
<View
style={{
height: this.state.statusBarHeight + STATUS_BAR_EXTRA_PADDING,
}}
>
<StatusBar {...this.props} />
</View>
);
}
}
export default StatusBarView;
Now inside your screens you could do something like
import StatusBarView from '{view_path}';
...
render() {
return (
<View>
<StatusBarView barStyle="default" />
<View>{rest of the view}</View>
</View>
);
}