Package Exports

react-native-scrollable-input

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-scrollable-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native Scrollable TextInput

A cross-platform TextInput component for React Native. This is a JavaScript-only implementation of React-Native TextInput.

Features

Fix the problem of scrolling RTL TextInput in a ScrollView Component for Android & iOS (Specially Android)

Installation

$ npm install react-native-scrollable-input --save

Quick Start

This example make a large scrollable content list for testing InputText when it put in the ScrollView (You can dragging on InputText's for moving content of ScrollView top and down).

import React from 'react';
import { View, ScrollView, StyleSheet } from 'react-native';
import InputText from 'react-native-scrollable-input';

export default class Example extends React.Component
{
    state = {
        text: '',
        tempList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    }
    
    render ()
    {
        return (
            <View style={styles.container}>
                <ScrollView>
                    {this.state.tempList.map ((item, index) =>
                    {
                        return (
                            <InputText
                                value={this.state.text}
                                onChangeText={(value) => this.setState ({text: value})}
                                style={styles.input}
                                containerStyle={styles.inputContainer}
                                placeholder='اینجا بنویسید ...'
                                // All React-Native Original TextInput Props is Supported.
                            />
                        );
                    })}
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create ({
  container: {
    flex: 1,
  },
  input: {
    // Your custom text fontFamily, color and etc ...
  },
  inputContainer: {
    // Custom style for Container of InputText
  }
});