/Javascript/React/React native intro slider

React native intro slider

import React from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import { StyleSheet, View } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
 
const styles = StyleSheet.create({
  buttonCircle: {
    width: 40,
    height: 40,
    backgroundColor: 'rgba(0, 0, 0, .2)',
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  //[...]
});
 
// slides = [...]
 
export default class App extends React.Component {
  _renderItem = ({ item }) => {
    return (
      <View style={styles.slide}>
        <Text style={styles.title}>{item.title}</Text>
        <Image source={item.image} />
        <Text style={styles.text}>{item.text}</Text>
      </View>
    );
  }
  _renderNextButton = () => {
    return (
      <View style={styles.buttonCircle}>
        <Ion
          name="md-arrow-round-forward"
          color="rgba(255, 255, 255, .9)"
          size={24}
        />
      </View>
    );
  };
  _renderDoneButton = () => {
    return (
      <View style={styles.buttonCircle}>
        <Ion
          name="md-checkmark"
          color="rgba(255, 255, 255, .9)"
          size={24}
        />
      </View>
    );
  };
  render() {
    return (
      <AppIntroSlider
        data={slides}
        renderDoneButton={this._renderDoneButton}
        renderNextButton={this._renderNextButton}
      />
    );
  }
}

Source: npmjs.com

Similar codes

0 vote118 views1 answer
React router nested routes active
Javascript React
18 votes103 views6 answers
Import svg as react component
Javascript React
0 vote106 views1 answer
React native custom debounce input
Javascript React
1 vote104 views2 answers
Upload image react
Javascript React
1 vote120 views1 answer
Vim react snippets
Javascript React
11 votes108 views4 answers
React native flatlist
Javascript React
6 votes104 views1 answer
React-native italics
Javascript React
2 votes107 views1 answer
Append a query string to the url react
Javascript React
4 votes104 views1 answer
Error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class.
Javascript React
0 vote145 views1 answer
Ionic react use yarn
Javascript React