CODEWITHSUNDEEP
react-native
mocansergiu666
mocansergiu666

Reputation: 327

React Native Sortable List

Why don't the items of the list stretch horizontally? How can I fix this?

React Native 0.44

React Native Sortable List (https://github.com/gitim/react-native-sortable-list)

Android Emulator

problem

Upvotes: 2

Views: 2101

Answers (1)

Simon Eliasson
Simon Eliasson

Reputation: 1295

I just solved this issue by having the style of the wrapper component set the width to the width of the screen of the running device. This is also done in the example for the plugin:

https://github.com/gitim/react-native-sortable-list/blob/master/examples/Basic/index.js

First you need to import Dimensions:

import { Dimensions } from 'react-native';

Get a reference to the window:

const window = Dimensions.get('window');

Then define a style as this example which I'm currently using:

function itemWrapper(){
    return {
        height: 70,
        width: window.width,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#fff',
        marginTop: 5,
        opacity: 1,
    }
}

Assign the style to the top-element in your row component's render method:

return <Animated.View style={itemWrapper()}>

</Animated.View>

The Animated.View should now stretch to the end of the screen along with its contents.

Upvotes: 2

Related Questions