React-native-flagsmith NPM

Flagsmith Client

The SDK clients for web and React Native for https://flagsmith.com/. Flagsmith allows you to manage feature flags and remote config across multiple projects, environments and organisations.

Getting Started

For full documentation visit https://docs.flagsmith.com/clients/javascript/

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See running in production for notes on how to deploy the project on a live system.

Usage

npm i react-native-flagsmith --save

Retrieving feature flags for your project

import flagsmith from "react-native-flagsmith"; //Add this line if you're using flagsmith via npm

flagsmith.identify("flagsmith_sample_user");

flagsmith.init({
	environmentID:"<YOUR_ENVIRONMENT_KEY>",
    cacheFlags: true,
	onChange: (oldFlags,params)=>{ //Occurs whenever flags are changed
	
		const {isFromServer} = params; //determines if the update came from the server or local cached storage
		
		//Check for a feature
		if (flagsmith.hasFeature("myCoolFeature")){
			myCoolFeature();
		}
				
		//Or, use the value of a feature
		const bannerSize = flagsmith.getValue("bannerSize");
		
		//Check whether value has changed
		const bannerSizeOld = oldFlags["bannerSize"] && oldFlags["bannerSize"].value;
		if (bannerSize !== bannerSizeOld) {
		
		}

	}
});

Initialisation options

See all available types here.

Property	Description	Required	Default Value
`environmentID: string`	Defines which project environment you wish to get flags for. example ACME Project - Staging.	YES	null
`onChange?: (previousFlags:IFlags, params:IRetrieveInfo)=> void`	Your callback function for when the flags are retrieved `(flags,{isFromServer:true/false})=>{...}`	YES	null
`onError?: (res:{message:string}) => void`	Callback function on failure to retrieve flags. `(error)=>{...}`		null
`asyncStorage?:any`	Needed for cacheFlags option, used to tell the library what implementation of AsyncStorage your app uses, i.e. ReactNative.AsyncStorage vs @react-native-community/async-storage, for web this defaults to an internal implementation.		null
`cacheFlags?: boolean`	Any time flags are retrieved they will be cached, flags and identities will then be retrieved from local storage before hitting the API ` \| \| null
`enableAnalytics?: boolean`	Enable sending flag analytics for getValue and hasFeature evaluations.		false
`enableLogs?: boolean`	Enables logging for key Flagsmith events		null
`defaultFlags?: IFlags`	Allows you define default features, these will all be overridden on first retrieval of features.		null
`preventFetch?: boolean`	If you want to disable fetching flags and call getFlags later.		false
`state?: IState`	Set a predefined state, useful for SSR / isomorphic applications.		false
`api?: string`	Use this property to define where you're getting feature flags from, e.g. if you're self hosting.		https://api.flagsmith.com/api/v1/

Available Functions

Property	Description
init(initialisationOptions)=> Promise<void>	Initialise the sdk against a particular environment
hasFeature(key:string)=> boolean	Get the value of a particular feature e.g. `flagsmith.hasFeature("powerUserFeature") // true`
getValue(key:string)=> string\|number\|boolean	Get the value of a particular feature e.g. `flagsmith.getValue("font_size") // 10`
getTrait(key:string)=> string\|number\|boolean	Once used with an identified user you can get the value of any trait that is set for them e.g. `flagsmith.getTrait("accepted_cookie_policy")`
getState()=>IState	Retrieves the current state of flagsmith, useful in NextJS / isomorphic applications. `flagsmith.getState()`
setTrait(key:string, value:string\|number\|boolean)=> Promise<IFlags>	Once used with an identified user you can set the value of any trait relevant to them e.g. `flagsmith.setTrait("accepted_cookie_policy", true)`
setTraits(values:Record<string, string\|number\|boolean>)=> Promise<IFlags>	Set multiple traits e.g. `flagsmith.setTraits({foo:"bar",numericProp:1,boolProp:true})`. Setting a value of null for a trait will remove that trait.
incrementTrait(key:string, value:number)=> Promise<IFlags>	You can also increment/decrement a particular trait them e.g. `flagsmith.incrementTrait("click_count", 1)`
startListening(ticks=1000:number)=>void	Poll the api for changes every x milliseconds
stopListening()=>void	Stop polling the api
getFlags()=> Promise<IFlags>	Trigger a manual fetch of the environment features, if a user is identified it will fetch their features. Resolves a promise when the flags are updated.
identify(userId:string, traits?:Record<string, string\|number\|boolean>)=> Promise<IFlags>	Identify as a user, optionally with traits e.g. `{foo:"bar",numericProp:1,boolProp:true}`. This will create a user for your environment in the dashboard if they don't exist, it will also trigger a call to `getFlags()`, resolves a promise when the flags are updated.
logout()=>Promise<IFlags>	Stop identifying as a user, this will trigger a call to `getFlags()`

Notes on initialisation

identify, setTrait and setTraits all trigger calls to getFlags, which in turn hits the get flags endpoint. This is due to identities and traits affecting flags that are returned.

However, you can avoid these extra calls to get flags if you call these functions before flagsmith.init.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Getting Help

If you encounter a bug or feature request we would like to hear about it. Before you submit an issue please search existing issues in order to prevent duplicates.