react-native-android-quick-settings-tiles
v0.1.0
Published
Create custom Quick Settings tiles for your app
Downloads
3
Maintainers
Readme
react-native-android-quick-settings-tiles
Library only work for android 13 or latest
Create custom Quick Settings tiles for your app info
Screenshot
Installation
npm install react-native-android-quick-settings-tiles
Addition installation step
In MainActivity.java
@Override
protected void onStart() {
super.onStart();
AndroidQuickSettingsTilesModule.startSession(getIntent()); //add line
}
@Override
public void onNewIntent(Intent intent) {
super.onNewIntent(intent);
AndroidQuickSettingsTilesModule.onNewIntent(intent); //add line
}
In AndroidManifest.xml
:
// ...
<!-- TileService for "Launch a dialog from a tile" section -->
<service
android:name="com.reactnativeandroidquicksettingstiles.QSDialogService"
android:icon="@drawable/more"
android:label="@string/qs_dialog_tile_label"
android:exported="true"
android:permission="android.permission.BIND_QUICK_SETTINGS_TILE">
<intent-filter>
<action android:name="android.service.quicksettings.action.QS_TILE" />
</intent-filter>
</service>
<!-- TileService for "Launch an activity from a tile" section -->
<service
android:name="com.reactnativeandroidquicksettingstiles.QSIntentService"
android:icon="@drawable/other"
android:label="@string/qs_intent_tile_label"
android:permission="android.permission.BIND_QUICK_SETTINGS_TILE">
<intent-filter>
<action android:name="android.service.quicksettings.action.QS_TILE" />
</intent-filter>
</service>
.....
</application>
In res/values/strings
:(optional)
<string name="app_name">AndroidQuickSettingsTiles Example</string>
<string name="tile_label">Quick Settings Sample</string>
<string name="qs_dialog_tile_label">QS Dialog Launcher</string>
<string name="qs_dialog_prompt">Change the tile state?</string>
<string name="qs_dialog_active">Turn off</string>
<string name="qs_dialog_inactive">Turn on</string>
<string name="qs_dialog_cancel">Cancel</string>
<string name="qs_intent_tile_label">QS Intent Launcher</string>
<!-- value init -->
<bool name="qs_dialog_default">true</bool>
<bool name="qs_intent_default">true</bool>
In res/values/color
: (optional)
<color name="colorPrimaryDialog">#0F9D58</color>
<color name="colorPrimaryDarkDialog">#0B8043</color>
In res/values/styles
:(optional)
<style name="HeadingFont" parent="@android:style/TextAppearance.Medium">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">24sp</item>
<item name="android:layout_marginTop">16dp</item>
<item name="android:paddingLeft">16dp</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:layout_gravity">center</item>
</style>
<style name="BodyFont" parent="@style/HeadingFont">
<item name="android:textSize">18sp</item>
<item name="android:layout_marginTop">8sp</item>
<item name="android:textColor">@color/colorPrimaryDark</item>
</style>
Usage
import RNQuickSettings from "react-native-android-quick-settings-";
React.useEffect(()=>{
const get=async ()=>{
const data=await RNQuickSettings.getLastChanged()
console.log('data',data)
if(data){
Alert.alert("Alert","Get latest")
}
RNQuickSettings.addEventListener("onChange",(payload)=>{
console.log('payload',payload)
Alert.alert("Alert","Tile changed")
})
}
get()
},[])
Request to add tile
function request(option:optionRequest): Promise<resultRequest>;
const result=await RNQuickSettings.request({
isDialog:true,
quickLabel:"QS Dialog Launcher", //same with label in manifest
icon:"more"
})
getLastChanged
When change a tile from quicksettings has triggered the application to open from a quit state,
* this method will return a resultChanged
containing the tile data, or null
if
* the app was opened via another method.
function getLastChanged(option:optionRequest): Promise<resultChanged>;
const data=await RNQuickSettings.getLastChanged()
event listener
function addEventListener(option:optionRequest,handler(payload:resultChanged): =>void);
RNQuickSettings.addEventListener("onChange",(payload)=>{
})
resultRequest type
type resultRequest={
type:"UNAVAILABLE"|"GRANTED";
code?:number;
}
| type value | Notes |
| --------------------- | ----------------------------------------------------------------- |
| UNAVAILABLE
| This feature is not available (only work on android 13 and later) |
| GRANTED
| The request is successfully |
| code value | Notes | | --------------------- | ----------------------------------------------------------------- | | 0 | |Quick setting is denied | 1 | |Quick setting already exists | 2 | |Add Quick setting success
optionRequest type
interface optionRequest{
quickLabel:string;
isDialog?:boolean; // default is false
icon:string;
}
- quickLabel: label of the tile to show to the user. This value cannot be null.
- icon: to use in the tile shown to the user. This value cannot be null.
- isDialog: flag to display dialog when change status of tile
Troubleshooting
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library