CODEWITHSUNDEEP
javascriptiosreactjsscrollviewreact-native
jeremybarbet
jeremybarbet

Reputation: 912

Image fixed inside the ScrollView with React native

I would like to fixed an image, and a linear gradient as well, on a dedicate view inside the scrollview component. I tried with some styles, but each times, the image scroll with content.

What can I do ?

<ScrollView>
  {/* TODO: Prevent scroll for this View — Add blur image on background */}
  <View>
    <Image source={{ uri: cover_photo }} />
    <LinearGradient  />
  </View>

  {/* This view is scrollable ABOVE the background image */}
  <View>
     {…content}
  </View>
</ScrollView>

Upvotes: 1

Views: 5577

Answers (1)

Nader Dabit
Nader Dabit

Reputation: 53711

To do this, you will not be able to set the Image or the LinearGradient in the ScrollView itself. Instead, you need to set the Image and LinearGradient outside of the ScrollView, and have them both set to absolute positioning.

Then, set the marginTop of the child View of the scrollView to be the same as the height of the image and LinearGradient. Here is an example setup:

var SampleApp = React.createClass({

  let LinearGradient = <View style={{ position:'absolute', top:0, left:0, width: width, height:width, backgroundColor: 'rgba(100, 97, 67, .7)' }} />

  render: function() {
    return (
      <View style={{ flex:1, backgroundColor: 'transparent' }}>
        <View>
          <Image style={{ height: width, width: width, position: 'absolute', top:0, left:0 }} source={{ uri: 'http://i01.i.aliimg.com/wsphoto/v0/32297951629_5/5pcs-lot-The-Hollowan-Star-Nicolas-Cage-Stylish-Square-Pillowcase-Cushion-Pillow-Cover.jpg' }} />
          { LinearGradient }
        </View>
        <ScrollView style={{ flex:1 }}>
          <View style={{ marginTop:320 }}>
            <Text>{content}</Text>
          </View>
        </ScrollView>
      </View>
    );
  }
});

There is a working version here.

https://rnplay.org/apps/PXNHyg

If you did not want the ScrollView offset from the top, just remove the marginTop like in this example.

https://rnplay.org/apps/-s97Gw

Full code is below:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Dimensions,
  ScrollView,
  Image
} = React;

let width = Dimensions.get('window').width

var SampleApp = React.createClass({

  render: function() {

    let LinearGradient = <View style={{ position:'absolute', top:0, left:0, width: width, height:width, backgroundColor: 'rgba(100, 97, 67, .7)' }} />

    return (
      <View style={{ flex:1, backgroundColor: 'transparent' }}>
            <View>
            <Image style={{ height: width, width: width, position: 'absolute', top:0, left:0 }} source={{ uri: 'http://i01.i.aliimg.com/wsphoto/v0/32297951629_5/5pcs-lot-The-Hollowan-Star-Nicolas-Cage-Stylish-Square-Pillowcase-Cushion-Pillow-Cover.jpg' }} />
                    { LinearGradient }
          </View>
        <ScrollView style={{ flex:1 }}>
          <View style={{ marginTop:320 }}>
                            <Text>{ipsum}</Text>
          </View>
        </ScrollView>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 28,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    fontSize: 19,
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

let ipsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Upvotes: 3

Related Questions