Jacse / react-native-app-intro-slider

Simple and configurable app introduction slider for react native
MIT License
1.65k stars 330 forks source link

Can't get a full height background-color #240

Closed florent6001 closed 3 years ago

florent6001 commented 3 years ago

Hi,

I just discover your github and tryied to implement intro-slider into a project. I got the basic code in the exemple section. But i can't get the full height working.

Here is my code

import React from 'react';
import {View, Text, Image, StyleSheet, StatusBar} from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';

const data = [
  {
    title: 'Title 1',
    text: 'Description.\nSay something cool',
    image: 'https://i.imgur.com/jr6pfzM.png',
    bg: '#59b2ab',
  },
  {
    title: 'Title 2',
    text: 'Other cool stuff',
    image: 'https://i.imgur.com/jr6pfzM.png',
    bg: '#febe29',
  },
  {
    title: 'Rocket guy',
    text: "I'm already out of descriptions\n\nLorem ipsum bla bla bla",
    image: 'https://i.imgur.com/jr6pfzM.png',
    bg: '#22bcb5',
  },
];

const styles = StyleSheet.create({
  slide: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 320,
    height: 320,
    marginVertical: 32,
  },
  text: {
    color: 'rgba(255, 255, 255, 0.8)',
    textAlign: 'center',
  },
  title: {
    fontSize: 22,
    color: 'white',
    textAlign: 'center',
  },
});

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showRealApp: false
    };
  }

  _renderItem = ({item}) => {
    return (
      <View
        style={[
          styles.slide,
          {
            backgroundColor: item.bg,
          },
        ]}>
        <Image source={item.image} style={styles.image} />
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.text}>{item.text}</Text>
      </View>
    );
  };

  _keyExtractor = (item) => item.title;

  render() {
    return (
      <View style={{flex: 1}}>
        <StatusBar translucent backgroundColor="transparent" />
        <AppIntroSlider
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
          data={data}
        />
      </View>
    );
  }
}

I tryied to give a height to every style but it's not worked. height: '100%'

Thank's for everyone who will try to help me.

florent6001 commented 3 years ago

Issue fixed.

Monkeystation commented 2 years ago

I'm having the same issue in the web build for expo. Does work fine in the iOS and Android builds.