0

i have small issue with scrollview.

i want to the title become sticky and the after the title means the messageBody become scrollable.

enter image description here

i have tried below one for this implementation.

HelpComponentContainer:---

 <View style={{ height: "100%" }}>
            <ScrollView
              style={{ flexGrow: 0 }}
            >
              <View>
                <Title>{messageTitle}</Title>

                <MessageBody>{messageBody}</MessageBody>
              </View>
            </ScrollView>
          </View>
const MessageBody = styled(Text)`
  color: #2d3e58;
  text-align: right;
  align-self: center;
  width: 90%;
`;

i am using this component in

message-widget-card:--

 <RBSheet
        ref={helpSheet}
        closeOnDragDown={true}
        closeOnPressMask={true}
        height={hp(60)}
        customStyles={{
          wrapper: {
            backgroundColor: "rgba(52,52,52,0.8)",
          },
          draggableIcon: {
            backgroundColor: "#d3d6dc",
          },
          container: {
            borderRadius: 15,
          },
        }}
      >
        <Container>
          <HelpComponentContainer
            isHelpForMessage={true}
            messageTitle={helpMessageTitle}
            messageBody={helpMessage}
          />
        </Container>
      </RBSheet>

i have tried this one.

But the scroll is not working.

just i want the Blue color title should be sticky and the body become scrollable.

How can i resolve this issue?

Thanks!!

Chinmayee Sahoo
  • 89
  • 7

1 Answers1

0

Try to implement like this keep the title outside ScrollView.

const HelpComponentContainer = () => {
  return (
    <View style={{flex: 1}}>
      <Title>{messageTitle}</Title>
      <ScrollView style={{flex: 1}}>
        <MessageBody>{messageBody}</MessageBody>
      </ScrollView>
    </View>
  );
};

export default HelpComponentContainer;
Hamas Hassan
  • 830
  • 6
  • 15