React Native Streak Styling Library
Installation
Install this library with npm
npm install streak-libraryInstall 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'}
/>
)
}