ScrollableView

A basic ScrollableView component that should render nicely on any platform. Supports a good level of customization.

You can customization ScrollableView component with the Props

Usage#

import React, {FC} from 'react';
import {Body, ScrollableView} from 'qdmrncomponents';

const App: FC = () => {
  return (
    <Body>
      <ScrollableView />
    </Body>
  );
};

Reference#

Props#

here all the list of Props you can use for ScrollableView Component and it Inherits all ScrollViewProps Props, from React Native

child#

Component that wraps platform ScrollView while providing integration with touch locking "responder" system.

Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes quick to debug.

import React, {FC} from 'react';
import {Body, ScrollableView, Text} from 'qdmrncomponents';

const App: FC = () => {
  return (
    <Body paddingAll={20}>
      <ScrollableView>
        <Text
          customeSize={40}
          label={
            '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.'
          }
        />
      </ScrollableView>
    </Body>
  );
};

bgColor#

props can change the background color of the ScrollableView area type string

defaut it is white#

paddingAll#

props for padding for all the four sides of the Body by default it none number

defaut it is none#

paddingLR#

props for padding for left and right of the Body by default it none number

defaut it is none#

paddingTB#

props for padding for top and bottom the four sides of the Body by default it none number

defaut it is none#

V_Aligin_center#

props for aligin the elements to vertical align center boolean

H_Aligin_center#

props for aligin the elements to horizontal align center boolean

inlineStyle#

props give addition props to the Button element type Object