React Native Streak Styling Library
Installation
Install this library with npm
npm install streak-library
Install this library with yarn
yarn add streak-library
Styling Components For Streak
Components Name | Description | Props |
---|---|---|
GeneralText | For writing normal text | headingText:String,fontSize:Number, fontFamily:String, textColor:String |
ButtonWithLeftIcon | It fixes the icon in left side of button | onPress: () => void, buttonText: string, iconSrc: string, textStyle?: TextStyle, imageStyle?: ImageStyle, containerStyle?: ViewStyle |
GeneralButton | It normal button with gradient shades | containerStyle?: ViewStyle[], onPress: Function, buttonText: string, rightToTextComponent?: Function, colors?: string[], labelStyle?: TextStyle, buttonStyle?: ViewStyle[], disabled?: boolean, borderColor?: string |
GeneralButtonWithNormalBg | Button with normal background | |
GeneralRoundButtonWithImage | Round button with image | |
LinearGradientButton | Button with gradient shades | |
GeneralButtonWithLoading | Button with simple loading added button with gradient | containerStyle?: ViewStyle[], onPress: Function, onPressCancel: Function, onPressConfirm: Function, buttonText: string, buttonText2:string, rightToTextComponent?: Function, colors?: string[], labelStyle?: TextStyle, buttonStyle?: ViewStyle[], disabled?: boolean, borderColor?: string, backgroundColor?:string, loading?: boolean, type?: stringonPress:Function, onPressConfirm:Function,onPressCancel:Function , type:String ('Primary','Secondary','primary','secondary','couple','couple2') |
RoundButton | Button with round shape | |
GeneralCheckBox | Normal Checkbox | checked: boolean, setCheck: Function, title: string,subText?: string |
GeneralLine | Simple Line | marginTop?: string |
CheckBoxWithDefaultBoxAndText | Checkbox with default box and text | checkBoxText: string, onPress: Function , checked: boolean , textColor: string , error?: string |
GeneralDropDown | It is dropdown component | value: string , setValue: Function , itemStyle: StyleProp , containerStyle: StyleProp , style: StyleProp , labelStyle: any , placeholder: string , defaultValue?: string |
HeadingAndSubHeading | For writing heading and subheading | headingColor?: string , subHeadingColor?: string , heading: string , subHeading: string , headingStyle?: TextStyle , subHeadingStyle?: TextStyle , fontFamilyHeading?: font_family_type , fontFamilySubHeading?: font_family_type , containerStyle?: ViewStyle |
HightlightCard | Card with highlighting | text: string , showArrow?: boolean , fontSize?: number |
GeneralLoader | Lottie loader for streak | containerStyle?: ViewStyle |
Step | Steps | number: number , content: string , backgroundColor?: string , textStyle?: TextStyle , leftComponent:Function , containerStyle?: ViewStyle |
Loader | Simple loader | color:String , size:String('small','large') |
GeneralTextInput | Normal textinput | errorText?: string , value: string , defaultValue?: string |
TextInputWOH | Textinput with WOH | errorText?: string , value: string ,defaultValue?: string |
ScrollViewWithScrollIndicator | it is simple scrollview with indicator | scrollViewProps: ScrollViewProps ,containerStyle?: ViewStyle[] |
CardWithTextAndBottomButton | Card with text and can apply button in bottom | imageSource?: any , text: string , onPress: Function ,containerStyle?: ViewStyle |
GeneralCarousel | It is general carousel | items: any, renderItem: Function , carouselContainerStyle?: ViewStyle[] , itemWidth: number , dotColor: string , dotColorFade: string , dotContainerStyle?: ViewStyle[] , dotStyle?: ViewStyle[] , onLayout?: () => void |
ChallengeNotification | Notification for sending challenge | isVisible: boolean, setVisible:Function, notificationTitle : string, notificationBody : string |
HeaderWithMiddleTitleLeftBackButtonRightAnyComponent | Header with back button and component on right | onPressBack?: Function , title?: string , rightComponent?: Function , titleColor?: string , backColor?: string , buttonColor?: string , containerStyle?: ViewStyle |
ImageComponentWithGeneralHeightDefined | Image with general height | buttonSource: ImageSourcePropType , imageStyle?: ImageStyle , portionOfGeneralHeight?: number |
SavingsButton | Settings button or Savings button | buttonContainerStyle: ViewStyle |
SuccessRive | For animated robot | name:string |
MasonryList | Direct list of elements | innerRef?: MutableRefObject<ScrollView |
FAQPopup | Popup of FAQ | imgSrc: ImageSourcePropType , title: string , hideViedo?: boolean , subtitle: string |
PopupWithNoBackButtonAndTwoBottomButton | Popup with no back button | isVisible: boolean , setPopup: Function , statusBarTranslucent: boolean , heading: string , secondaryButtonText: string , primaryButtonText: string , subHeading?: string , onPressSecondaryButton?: Function , onPressPrimaryButton: Function , centerImage?: ImageSourcePropType , containerStyle: ViewStyle |
PopupWithBackButtonAndHeader | Popup with back button handler | isVisible: boolean ,setPopup: Function , children: React.ReactChild , statusBarTranslucent: boolean , title: string , headerNotNeeded?: boolean |
PopupWithHeaderBackLineAndBottomTwoButton | Popup with header back line and bottom two button | isVisible: boolean , setPopup: Function , statusBarTranslucent: boolean , title: string , leftButtonText: string , subTitle?: string , rightButtonText: string , onPressLeftButton: Function , onPressRightButton: Function , removeHeaderLine?: boolean , removeButtonLine?: boolean , headerNotNeeded?: boolean , containerStyle: ViewStyle , childrenStyle: ViewStyle |
PopupWithNobackButtonAndSingleBottomButton | Popup with no back button and single bottom button | ,isVisible: boolean , setPopup: Function , children?: React.ReactChild , statusBarTranslucent: boolean , title: string , subTitle?: string , buttonText: string , containerStyle?: ViewStyle |
PopupWithSingleButton | Popup with single button | isVisible: boolean , setPopup: Function , children: React.ReactChild , statusBarTranslucent: boolean , title: string , buttonText: string , containerStyle?: ViewStyle , onPressButton: Function , buttonStyle: ViewStyle[] |
RoboPopup | It is popup for robo | isVisible: boolean , setPopup: Function , children?: React.ReactChild , statusBarTranslucent: boolean , title: string , subTitle?: string , buttonText: string , containerStyle?: ViewStyle |
SuccessBottomNew | It is an success bottom new popup | isVisible: boolean , onDone: Function , image?: any , children?: any , color?: string , heading: string , subHeading: string , buttonText: string , childrenContainerStyle?: ViewStyle , textStyleHeading1?: TextStyle , textStyleHeading2?: TextStyle , imageBackgroundStyle?: ViewStyle , imageStyle?: ImageStyle , orderPlaced?: boolean , buttonColor?: string , body: stringt is an warning popup |
Usage/Examples
import {GeneralText} from 'streak-library'
function App() {
return (
<GeneralText
headingText={'Hello there'}
fontSize={fs20}
fontFamily={'500'}
textColor={'#242424'}
/>
)
}