rn-topbutton-animation

BUILD SETUP

## Installation
Version 1.0.8

npm install rn-topbutton-animation --save

USAGE

import React from 'react';
import {View, Text, Image} from 'react-native';
import {HeaderSlide} from 'rn-topbutton-animation';
import {globalStyle, width, height} from '../components/styles';

export default function Check({navigation}) {
  function renderFirstItem() {
    return (
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          top: width / 4,
        }}>
        <Image
          source={require('../../assets/notfound.jpg')}
          style={{
            justifyContent: 'center',
            height: height * 0.5,
            resizeMode: 'center',
            top: height / 4,
          }}
        />
      </View>
    );
  }
  function renderSecondItem() {
    return (
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          top: width / 4,
        }}>
        <Text>Hello world2</Text>
      </View>
    );
  }
  function renderThirdItem() {
    return (
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          top: width / 4,
        }}>
        <Text>Hello world3</Text>
        <Text>I Just Built this package</Text>
      </View>
    );
  }
  function renderFourthItem() {
    return (
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          top: width / 4,
        }}>
        <Text>Hello world4</Text>
        <Text>I am Software Engineer</Text>
      </View>
    );
  }
  const data = ['article', 'foto',];
  return (
    <View>
      <HeaderSlide
        title={data}
        renderFirstItem={renderFirstItem}
        renderSecondItem={renderSecondItem}
        renderThirdItem={renderThirdItem}
        renderFourthItem={renderFourthItem}
      />
    </View>
  );
}

Current API(Property)

| Property | Type | Description | | ----------- | ------------------------ | --------------------------------- | | renderFirstItem | function (required) | render component
| renderSecondItem | function (required) | render component
| renderThirdItem | function (optional) | render component
| renderFourthItem | function (optional) | render component | | | |title | PropTypes.Array (required) |button title |buttonColor | PropTypes.String (optional) |color for button

note : the amount of render item must same with the length of title. title must have length at least 2 and maximum 4

Project Documentation

• Author Account

Arwy Syahputra Siregar
github.com/arwysyah