CODEWITHSUNDEEP
androidreact-native
codegrid
codegrid

Reputation: 1007

Image not scrolling with page react native

New in react-native, I am trying to create a registration page with an image at the top of the page.

enter image description here

I have achieved that but the issue the image does not scroll with the page. As the form is long and while trying to fill the form when the focus is on the textbox and the keyboard control comes up the form scroll while the image remain static.

Style:

imageContainer: {
    flex: .7,
    width: null,
    height: null
  },
  logoContainer: {
    flex: .7,
    marginTop: deviceHeight / 8,
  },
  logo: {
    position: "relative",
    left: Platform.OS === "android" ? 25 : 50,
    top: Platform.OS === "android" ? 35 : 60,
    width: 365,
    height: 100
  },
  title: {
    fontSize: 45,
    fontWeight: "300",
    color: "#FFF",
    fontFamily: "'Quicksand', sans-serif"
  },
  titleButton: {
    height: 45,
    lineHeight: 45,
    fontSize: 11,
    textTransform: "uppercase",
    letterSpacing: 2.5,
    fontWeight: 500,
    color: "#000 !important",
    backgroundColor: "#85C227",
    border: "none",
    borderRadius: 45,
    cursor: "pointer",
    outline: "none",
    paddingLeft:40,
    paddingRight:40,
    textAlign: "center  !important",
    alignSelf: "center" 
  }
  ,
  text: {
    color: "#FFF",
    bottom: 6,
    marginTop: 5,
    fontSize: 30,
  },
  container: {
    flex: 1,
  },

  firstrow: {
    flex: .7,
  },

  secondrow: {
    flex: 2,
  }

Upvotes: 1

Views: 489

Answers (2)

LordKiz
LordKiz

Reputation: 643

Flex is messing up your views. For a start use Dimensions to partition your screen based on screen height. const height = Dimensions.get('window').height. Then wrap your view with a ScrollView

Upvotes: 1

joscha
joscha

Reputation: 1183

You should use an Image instead of an ImageBackground for your use case.

The position of the ImageBackground is probably set to absolute. This sets the image position relative to the parent (which in this case is the entire screen)

You can remove this line because the default value for position is relative.

Upvotes: 1

Related Questions