1.0.16 • Published 1 year ago
streak-library v1.0.16
React Native Streak Styling Library
Installation
Install this library with npm
npm install streak-libraryInstall this library with yarn
yarn add streak-libraryStyling 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 | 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 | number, lineStyle?: ViewStyle | ViewStyle[] | |||||||||
| 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 | undefined , arrowColor: string , dropDownStyle: any , arrowSize: number , iconStyle: any | ||||||||||
| 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 | ViewStyle[] | ||||||||||
| HightlightCard | Card with highlighting | text: string , showArrow?: boolean , fontSize?: number | |||||||||||
| GeneralLoader | Lottie loader for streak | containerStyle?: ViewStyle | ViewStyle[] , opacity?: number | ||||||||||
| Step | Steps | number: number , content: string , backgroundColor?: string , textStyle?: TextStyle , leftComponent:Function , containerStyle?: ViewStyle | ViewStyle[] , numberColor?: string | ||||||||||
| Loader | Simple loader | color:String , size:String('small','large') | |||||||||||
| GeneralTextInput | Normal textinput | errorText?: string , value: string , defaultValue?: string | number , onChangeText?: (text: string) => void , placeholder?: string , keyboardType?: KeyboardTypeOptions , eyeButton?: any , icon?: any , style?: StyleProp , textInputStyle?: StyleProp , placeholderTextColor?: string , errorContainer?: StyleProp , secureTextEntry?: boolean , autoFocus?: boolean , autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters' , title: string , color?: string , titleColor?: string , borderColor?: string , disabled?: boolean , containerStyle?: ViewStyle[] , titleRightComponent?: Function , textInputRef?: any , onEndEditing?: Function , multiLine?: boolean , numOfLines?: number | |||||||
| TextInputWOH | Textinput with WOH | errorText?: string , value: string ,defaultValue?: string | number ,onChangeText?: (text: string) => void ,placeholder?: string ,keyboardType?: KeyboardTypeOptions ,eyeButton?: any ,icon?: any ,style?: StyleProp ,textInputStyle?: StyleProp ,placeholderTextColor?: string ,errorContainer?: StyleProp ,secureTextEntry?: boolean ,autoFocus?: boolean ,autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters' ,title: string ,color?: string ,titleColor?: string ,borderColor?: string ,disabled?: boolean ,containerStyle?: ViewStyle[] ,titleRightComponent?: Function | |||||||
| ScrollViewWithScrollIndicator | it is simple scrollview with indicator | scrollViewProps: ScrollViewProps ,containerStyle?: ViewStyle[] | ViewStyle , bottomScrollReach?: number , defaultScrollIndicatorState?: boolean , hideBotomSpace?: boolean , heightOfBottomSpace?: number | ||||||||||
| CardWithTextAndBottomButton | Card with text and can apply button in bottom | imageSource?: any , text: string , onPress: Function ,containerStyle?: ViewStyle | ViewStyle[] , buttonText: string | undefined , colors?: string[] , fontSize?: number | |||||||||
| 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 | ViewStyle[] | ||||||||||
| ImageComponentWithGeneralHeightDefined | Image with general height | buttonSource: ImageSourcePropType , imageStyle?: ImageStyle , portionOfGeneralHeight?: number | |||||||||||
| SavingsButton | Settings button or Savings button | buttonContainerStyle: ViewStyle | ViewStyle[] , imgSrc: string , buttonLabel: string , buttonSublabel: string , onPress: () => void , colors: [] , borderColor: string , backgroundColor: string , labelStyle: TextStyle | TextStyle[] | |||||||||
| SuccessRive | For animated robot | name:string | |||||||||||
| MasonryList | Direct list of elements | innerRef?: MutableRefObject<ScrollView | undefined>, loading?: boolean , refreshing?: RefreshControlProps'refreshing' , onRefresh?: RefreshControlProps'onRefresh' , onEndReached?: () => void , onEndReachedThreshold?: number , style?: StyleProp , data: T[] , renderItem: ({item: T, i: number}) => ReactElement , LoadingView?: React.ComponentType | React.ReactElement | null , ListHeaderComponent?: React.ComponentType | React.ReactElement | null , ListEmptyComponent?: React.ComponentType | React.ReactElement | null , ListFooterComponent?: React.ComponentType | React.ReactElement | null , ListHeaderComponentStyle?: StyleProp , contentContainerStyle?: StyleProp , containerStyle?: StyleProp , numColumns?: numbe ,keyExtractor?: ((item: T | any, index: number) => string) | undefined |
| 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 | ViewStyle[] , onPressButton: Function , primaryButton?: boolean , titleStyle: TextStyle , loader?: boolean | ||||||||||
| PopupWithSingleButton | Popup with single button | isVisible: boolean , setPopup: Function , children: React.ReactChild , statusBarTranslucent: boolean , title: string , buttonText: string , containerStyle?: ViewStyle , onPressButton: Function , buttonStyle: ViewStyle[] | ViewStyle | ||||||||||
| RoboPopup | It is popup for robo | isVisible: boolean , setPopup: Function , children?: React.ReactChild , statusBarTranslucent: boolean , title: string , subTitle?: string , buttonText: string , containerStyle?: ViewStyle | ViewStyle[] , onPressButton: Function , roboImageSource: ImageSourcePropType , robotImageStyle?: ImageStyle | ImageStyle[] | |||||||||
| 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 | isVisible: boolean , setPopup: Function , children?: React.ReactChild , statusBarTranslucent: boolean , title: string , subTitle?: string , buttonText: string , containerStyle?: ViewStyle , onPressButton: Function , imageSource?: any , imageStyle?: ImageStyle[] | ImageStyle , hideRive: boolean |
Usage/Examples
import {GeneralText} from 'streak-library'
function App() {
return (
<GeneralText
headingText={'Hello there'}
fontSize={fs20}
fontFamily={'500'}
textColor={'#242424'}
/>
)
}