Use Background image

[zapcriativo]

Hello,

When you try to use a background image, the image becomes unconfigured.

I try to use this settings, but returned error

   _renderItem = props => (      <Image style = {{flex: 1, width: null, height: null, resizeMode: 'cover'}} source = {props.image} />    ); When i try to use renderitem

How to use image in background?

My file code

import React, { Component } from 'react'; import { Text, View, StyleSheet } from 'react-native'; import AppIntroSlider from 'react-native-app-intro-slider'; import Teste from './teste';

const slides = [ { key: 'somethun', title: 'Title 1', text: 'Description.\nSay something cool', image: require('../assets/images/bg_screen1.jpg'), backgroundColor: '#59b2ab', }, { key: 'somethun-dos', title: 'Title 2', text: 'Other cool stuff', image: require('../assets/images/bg_screen1.jpg'), backgroundColor: '#febe29', }, { key: 'somethun1', title: 'Rocket guy', text: 'I\'m already out of descriptions\n\nLorem ipsum bla bla bla', image: require('../assets/images/bg_screen1.jpg'), backgroundColor: '#22bcb5', } ];

const styles = StyleSheet.create({ mainContent: { flex: 1, alignItems: 'center', justifyContent: 'space-around', }, image: { width: 320, height: 320, }, text: { color: 'rgba(255, 255, 255, 0.8)', backgroundColor: 'transparent', textAlign: 'center', paddingHorizontal: 16, }, title: { fontSize: 22, color: 'white', backgroundColor: 'transparent', textAlign: 'center', marginBottom: 16, }, });

export default class IntroSlider extends Component {

state = { showRealApp : false }

_onDone = () => { this.setState({showRealApp:true}) }

   _renderItem = props => (      <Image style = {{flex: 1, width: null, height: null, resizeMode: 'cover'}} source = {props.image} />    );

render() {

if(this.state.showRealApp){
  return <Teste/>
} else {
  return <AppIntroSlider slides={slides} renderItem={this._renderItem} bottomButton nextLabel={"AVANÇAR"} doneLabel={"ENTRAR"} onDone={this._onDone} renderItem={this._renderItem} />

} 

} }

[Jacse]

Remember to import Image from react-native.

[zapcriativo]

Hello,

Thanks for the feedback,

I made the change but now does not return the image, the background is blank

[zapcriativo]

My source code

import React, { Component } from 'react'; import { Text, View, StyleSheet,NavigationActions, Image} from 'react-native'; import AppIntroSlider from 'react-native-app-intro-slider'; import LoginScreen from './LoginScreen';

const slides = [ { key: 'somethun', title: 'Title 1', text: 'Description.\nSay something cool', image: require('../assets/images/intro1.png'), }, { key: 'somethun-dos', title: 'Title 2', text: 'Other cool stuff', image: require('../assets/images/intro2.png'), }, { key: 'somethun1', title: 'Rocket guy', text: 'I\'m already out of descriptions\n\nLorem ipsum bla bla bla', image: require('../assets/images/intro3.png'), } ];

export default class IntroSlider extends Component {

state = { showRealApp : false }

_navigateSomewhere = () => { this.props.navigation.navigate('LoginScreen'); }

_renderItem = props => ( <Image style={{ flex: 1, width: null, height: null, resizeMode: 'cover'}} source={props.image} /> );

render() {

if(this.state.showRealApp){
  this.props.navigation.navigate('Login')    
} else {
  return <AppIntroSlider slides={slides} renderItem={this._renderItem} bottomButton nextLabel={"AVANÇAR"} doneLabel={"ENTRAR"} onDone={this._navigateSomewhere} renderItem={this._renderItem} />
} 

} }

[togglebytes]

@Jacse if u want to make background still just keep the slider background transparent.

App.js

`import React, { Component } from 'react'; import { StyleSheet,View,Platform, Text, Image, ImageBackground } from 'react-native'; import Router from './config/Router'; import Baker from './assets/svgimages/Prize_money.svg'; import AsyncStorage from '@react-native-community/async-storage'; import AppContextFunction from './config/appcontextfunction'; import CheckInternet from './config/checkinternet';

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, MainContainer: { flex: 1, paddingTop: (Platform.OS) === 'ios' ? 20 : 0, alignItems: 'center', justifyContent: 'center', padding: 20 }, title: { fontSize: 26, color: '#fff', fontWeight: 'bold', textAlign: 'center', marginTop: 20, }, text: { color: '#fff', fontSize: 25, }, image: { width: '80%', height: '70%', resizeMode: 'contain' }, });

class SplashScreen extends Component { render() { const viewStyles = [styles.container, { backgroundColor: 'orange' }] return (

);

} }

class App extends Component { constructor(props) { super(props); this.state = { isLoading: true, show_Main_App: false, } }

performTimeConsumingTask = async () => { return new Promise((resolve) => setTimeout( () => { resolve('result') }, 2000 ) ); }

async componentDidMount() { AsyncStorage.getItem("alreadyLaunched").then(value => { console.log(value) if (value !== null) { if (value == "true") { this.setState({ show_Main_App: true }); } } }) const data = await this.performTimeConsumingTask(); if (data !== null) { this.setState({ isLoading: false }); } } on_Done_all_slides = () => { AsyncStorage.setItem("alreadyLaunched", "true"); this.setState({ show_Main_App: true }); };

on_Skip_slides = () => { AsyncStorage.setItem("alreadyLaunched", "true"); this.setState({ show_Main_App: true }); };

render() { if (this.state.isLoading) { return ; } else if (!this.state.show_Main_App) { return ( <ImageBackground source={require('./assets/images/introbkg.png')} style={{ width: '100%', height: '100%' }}> <AppIntroSlider slides={slides} onDone={this.on_Done_all_slides} showSkipButton={true} onSkip={this.on_Skip_slides} /> ); } else { return (

);

} } }

const slides = [ { key: 'k1', image: require('./assets/images/assets_intro1.png'), imageStyle: styles.image, backgroundColor: 'transparent', }, { key: 'k2', image: require('./assets/images/assets_intro2.png'), imageStyle: styles.image, backgroundColor: 'transparent', }, { key: 'k3', image: require('./assets/images/assets_intro3.png'), imageStyle: styles.image, backgroundColor: 'transparent', },

]; export default App; `