NativeBase (React Native) avoid scrolling back to top

Question

I'm trying to use the List component to handle a lot of inputs, but notice that it keeps scrolling back to top after entering the input.

Don't know if this is related to ListView always scrolls back to the top in react-native - I have tried to <List style={{flex> 1}} ..> but no luck..

UPDATE

Thought it might be more easy to help me out if I throw in some code

import React, { Component } from 'react'
import { View } from 'react-native'
import { List, ListItem,  InputGroup, Input, Icon, Button } from 'native-base'

export default class AddInformation extends Component {
  constructor(props) {
    super(props)

    this.state = {
      items: 
[
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"}]}

}

render () {
    return (
      <List
        dataArray={this.state.items}
        renderRow={
          (obj) => {
            console.log(obj)
            return (
              <ListItem>
                <InputGroup>

                <Input
                  placeholder={`${obj.keyboardType} keyboard`}
                  onChangeText={ (text)=> {
                    //TODO
                  } }
                  keyboardType={obj.keyboardType}
                />
                </InputGroup>
              </ListItem>
            )
        }}>
      </List>
    )
  }
}

UPDATE 2

Still not working..

import React, { Component } from 'react'
import { View, ListView, Text, TextInput } from 'react-native'
import { FormLabel, FormInput } from 'react-native-elements'

export default class AddInformation extends Component {
  constructor(props) {
    super(props)
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

  }

  componentDidMount() {
   this.state = {
      items: ds.cloneWithRows([
        {hint: "foo", value: "", keyboardType: "default"},
         ...
        {hint: "bar", value: "", keyboardType: "numeric"}
      ])
    }

  }
...

And the render method:

  render () {
    return (
      <View style={{flex: 1}}>
        <ListView

          dataSource={this.state.Specifications}
          renderRow={(rowData) =>
            <View>
              <FormLabel>{rowData.hint}</FormLabel>
              <FormInput
                placeholder={`Keyboard: ${rowData.keyboardType}`}
                />
                <TextInput />
            </View>
          }/>
      </View>
    )
  }
}

Don't know if it has something to do with with the NativeBase layout..?

import React, { Component } from 'react'
import { Container, Content, Header, Title, Button, Icon } from 'native-base'
import AddInformation from './AddInformation'

export default class ScreenAddItemInformation extends Component {
  render() {
    return (
      <Container>

        <Header>
          <Button transparent onPress={ () => this.props.navigator.pop() }>
            <Icon name='ios-backspace' />
          </Button>

          <Title>Add New Item</Title>

        </Header>

        <Content>
          <AddInformation />
        </Content>

      </Container>
    );
  }
}

UPDATE 3

I just tried out with a NB <List> of hard coded <ListItem> and no dynamic rendering.. It's still the issue that once the keyboard goes down the "view" scrolls back to the top.

Answer 1

I ran into this issue as well, and this proved to be a simple workaround for me.

<Container>
    <ScrollView>{/* <- Use this rather than Content */}
      {/* form with this issue */}
    </ScrollView>
</Container>