React to home light
What is the best module for viewing images? I wanted to find something like https://github.com/oblador/react-native-lightbox which I missed to reject features etc. But this module seems to be outdated. Does anyone here use something similar that works with the latest version of React Native?
Something I can use to view images, pinch to zoom in, scroll to reject, is very important to my application.
+3
source to share
1 answer
You should know about routerFlux first . then go to api and read LightBox components ...
So, here are the simple codes you make in sight:
import React from 'react';
import { View , Text } from 'react-native';
import { Router , Scene , Lightbox} from 'react-native-router-flux';
// Components
import ButtonPage from "./components/ButtonPage";
import LoginLightbox from "./components/lightbox/LoginLightbox";
class loginLightbox extends React.Component {
render() {
return (
<View style={{ flex : 1 , justifyContent: 'center' , alignItems: 'center'}}>
<Text>lightBox</Text>
</View>
)
}
}
export default class App extends React.Component {
render() {
return (
<Router>
<Lightbox>
<Scene key="root">
<Scene key="button" component={ButtonPage } title="ButtonPage " initial/>
</Scene>
<Scene key="loginLightbox" component={loginLightbox} />
</Lightbox>
</Router>
)
}
}
and this is ButtonPage:
import React from 'react';
import { Container , Button } from 'native-base';
import { Actions } from 'react-native-router-flux';
import { form } from './../assets/styles';
export default class ButtonPage extends React.Component {
render() {
return (
<Container>
<Button full style={form.submitButton} onPress={() => Actions.loginLightbox()}>
<Text style={form.submitText}>ورود</Text>
</Button>
</Container>
)
}
}
now lets you make the BaseLightBox tow class :
import React from 'react';
import { Animated , Dimensions } from 'react-native';
import {View, Button, Text, Icon} from 'native-base';
import EStyleSheet from 'react-native-extended-stylesheet';
import { Actions } from 'react-native-router-flux';
const { height : deviceHeight , width : deviceWidth} = Dimensions.get('window');
export default class BaseLightbox extends React.Component {
constructor(props) {
super(props);
this.state = {
opacity : new Animated.Value(0)
}
}
componentWillMount() {
Animated.timing(this.state.opacity,{
toValue : 1,
duration : 200
}).start();
}
close() {
Animated.timing(this.state.opacity,{
toValue : 0,
duration : 200
}).start(Actions.pop);
}
_renderLightbox() {
const { children , verticalPercent = 1 , horizontalPercent = 1 } = this.props;
const width = verticalPercent ? deviceWidth * verticalPercent : deviceWidth;
const height = horizontalPercent ? deviceHeight * horizontalPercent : deviceHeight;
return (
<View style={{ width , height, justifyContent: 'center' , alignItems: 'center' , backgroundColor : 'white' , borderRadius : 4}}>
{children}
<Button transparent style={{ position: 'absolute', top : 0 , left : 0}} onPress={() => this.close() }>
<Icon name='md-close-circle' style={{ fontSize : 30 , color : '#34495e'}}/>
</Button>
</View>
)
}
render() {
return (
<Animated.View style={[styles.container , { opacity : this.state.opacity }]}>
{this._renderLightbox()}
</Animated.View>
)
}
}
const styles = EStyleSheet.create({
container : {
backgroundColor: 'rgba(52,52,52,.5)',
position: 'absolute',
top : 0 ,
bottom : 0,
left : 0,
right : 0,
justifyContent: 'center',
alignItems: 'center'
}
})
and LoginLightBox :
import React from 'react';
import { Animated , Text } from 'react-native';
import BaseLightbox from "./BaseLightbox";
export default class LoginLightbox extends React.Component {
render() {
return (
<BaseLightbox verticalPercent={0.7} horizontalPercent={0.5}>
<Text>Welcome to roocket</Text>
<Text>Learn React native</Text>
</BaseLightbox>
)
}
}
+1
source to share