This repository has been archived by the owner on Jan 18, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 477
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[configure-splash-screen] Refactor and integrate with
@expo/config
(#…
- Loading branch information
Showing
44 changed files
with
1,564 additions
and
703 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,45 @@ | ||
import { | ||
AndroidSplashScreenConfig, | ||
SplashScreenImageResizeMode, | ||
configureAndroidSplashScreen, | ||
} from '@expo/configure-splash-screen'; | ||
|
||
import { ExpoConfig } from '../Config.types'; | ||
import { addWarningAndroid } from '../WarningAggregator'; | ||
|
||
export function getSplashScreen(config: ExpoConfig) { | ||
if (config.splash?.image || config.android?.splash?.mdpi) { | ||
return true; | ||
} else { | ||
return false; | ||
export function getSplashScreenConfig(config: ExpoConfig): AndroidSplashScreenConfig | undefined { | ||
if (!config.splash && !config.android?.splash) { | ||
return; | ||
} | ||
|
||
const result: AndroidSplashScreenConfig = { | ||
imageResizeMode: | ||
config.android?.splash?.resizeMode ?? | ||
config.splash?.resizeMode ?? | ||
SplashScreenImageResizeMode.CONTAIN, | ||
backgroundColor: | ||
config.android?.splash?.backgroundColor ?? config.splash?.backgroundColor ?? '#FFFFFF', // white | ||
image: | ||
config.android?.splash?.xxxhdpi ?? | ||
config.android?.splash?.xxhdpi ?? | ||
config.android?.splash?.xhdpi ?? | ||
config.android?.splash?.hdpi ?? | ||
config.android?.splash?.mdpi ?? | ||
config.splash?.image, | ||
}; | ||
|
||
return result; | ||
} | ||
|
||
export async function setSplashScreenAsync(config: ExpoConfig, projectRoot: string) { | ||
const splash = getSplashScreen(config); | ||
if (!splash) { | ||
const splashConfig = getSplashScreenConfig(config); | ||
if (!splashConfig) { | ||
return; | ||
} | ||
|
||
addWarningAndroid( | ||
'splash', | ||
'This is the image that your app uses on the loading screen, we recommend installing and using expo-splash-screen.', | ||
'https://github.com/expo/expo/blob/master/packages/expo-splash-screen/README.md' | ||
); | ||
try { | ||
await configureAndroidSplashScreen(projectRoot, splashConfig); | ||
} catch (e) { | ||
addWarningAndroid('splash', e); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,39 @@ | ||
import { | ||
configureIosSplashScreen, | ||
IosSplashScreenConfig, | ||
SplashScreenImageResizeMode, | ||
} from '@expo/configure-splash-screen'; | ||
|
||
import { ExpoConfig } from '../Config.types'; | ||
import { addWarningIOS } from '../WarningAggregator'; | ||
|
||
export function getSplashScreen(config: ExpoConfig) { | ||
if (config.splash || config.ios?.splash) { | ||
return true; | ||
} else { | ||
return false; | ||
export function getSplashScreen(config: ExpoConfig): IosSplashScreenConfig | undefined { | ||
if (!config.splash && !config.ios?.splash) { | ||
return; | ||
} | ||
|
||
const result: IosSplashScreenConfig = { | ||
imageResizeMode: | ||
config.ios?.splash?.resizeMode ?? | ||
config.splash?.resizeMode ?? | ||
SplashScreenImageResizeMode.CONTAIN, | ||
backgroundColor: | ||
config.ios?.splash?.backgroundColor ?? config.splash?.backgroundColor ?? '#FFFFFF', // white | ||
image: config.ios?.splash?.image ?? config.splash?.image, | ||
}; | ||
|
||
return result; | ||
} | ||
|
||
export function setSplashScreenAsync(config: ExpoConfig, projectRoot: string) { | ||
const splash = getSplashScreen(config); | ||
if (!splash) { | ||
export async function setSplashScreenAsync(config: ExpoConfig, projectRoot: string) { | ||
const splashConfig = getSplashScreen(config); | ||
|
||
if (!splashConfig) { | ||
return; | ||
} | ||
|
||
addWarningIOS( | ||
'splash', | ||
'This is the image that your app uses on the loading screen, we recommend installing and using expo-splash-screen.', | ||
'https://github.com/expo/expo/blob/master/packages/expo-splash-screen/README.md' | ||
); | ||
try { | ||
await configureIosSplashScreen(projectRoot, splashConfig); | ||
} catch (e) { | ||
addWarningIOS('splash', e); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
95 changes: 95 additions & 0 deletions
95
packages/configure-splash-screen/src/SplashScreenConfig.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
import { Color } from 'color-string'; | ||
|
||
import { SplashScreenImageResizeModeType, SplashScreenStatusBarStyleType } from './constants'; | ||
|
||
/** | ||
* iOS SplashScreen config. | ||
*/ | ||
export type IosSplashScreenConfig = { | ||
backgroundColor: Color; | ||
|
||
image?: string; | ||
imageResizeMode?: SplashScreenImageResizeModeType; | ||
|
||
statusBar?: { | ||
hidden?: boolean; | ||
style?: SplashScreenStatusBarStyleType; | ||
}; | ||
|
||
darkMode?: { | ||
backgroundColor?: Color; | ||
image?: string; | ||
}; | ||
}; | ||
|
||
/** | ||
* Android SplashScreen config. | ||
*/ | ||
export type AndroidSplashScreenConfig = { | ||
backgroundColor: Color; | ||
|
||
image?: string; | ||
imageResizeMode?: SplashScreenImageResizeModeType; | ||
|
||
statusBar?: { | ||
hidden?: boolean; | ||
style?: SplashScreenStatusBarStyleType; | ||
translucent?: boolean; | ||
backgroundColor?: Color; | ||
}; | ||
|
||
darkMode?: { | ||
backgroundColor?: Color; | ||
image?: string; | ||
statusBar?: { | ||
style?: SplashScreenStatusBarStyleType; | ||
backgroundColor?: Color; | ||
}; | ||
}; | ||
}; | ||
|
||
/** | ||
* The very same as `IosSplashScreenConfig`, but JSON-friendly (values for each property are JavaScript built-in types). | ||
*/ | ||
export type IosSplashScreenConfigJSON = { | ||
backgroundColor: string; | ||
|
||
image?: string; | ||
imageResizeMode?: string; | ||
|
||
statusBar?: { | ||
hidden?: boolean; | ||
style?: string; | ||
}; | ||
|
||
darkMode?: { | ||
backgroundColor?: string; | ||
image?: string; | ||
}; | ||
}; | ||
|
||
/** | ||
* The very same as `IosSplashScreenConfig`, but JSON-friendly (values for each property are JavaScript built-in types). | ||
*/ | ||
export type AndroidSplashScreenConfigJSON = { | ||
backgroundColor: string; | ||
|
||
image?: string; | ||
imageResizeMode?: string; | ||
|
||
statusBar?: { | ||
hidden?: boolean; | ||
style?: string; | ||
translucent?: boolean; | ||
backgroundColor?: string; | ||
}; | ||
|
||
darkMode?: { | ||
backgroundColor?: string; | ||
image?: string; | ||
statusBar?: { | ||
style?: string; | ||
backgroundColor?: string; | ||
}; | ||
}; | ||
}; |
138 changes: 138 additions & 0 deletions
138
packages/configure-splash-screen/src/__tests__/cli-command.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,138 @@ | ||
import configureAndroid from '../android'; | ||
import createCommand from '../cli-command'; | ||
import configureIos from '../ios'; | ||
|
||
jest.mock('../ios', () => ({ | ||
__esModule: true, | ||
default: jest.fn(), | ||
})); | ||
jest.mock('../android', () => ({ | ||
__esModule: true, | ||
default: jest.fn(), | ||
})); | ||
|
||
describe('cli-command', () => { | ||
describe('successful scenarios', () => { | ||
it('basic scenario', async () => { | ||
await createCommand().parseAsync(['--background-color', 'rgba(10, 20, 30, 0.2)'], { | ||
from: 'user', | ||
}); | ||
expect(configureIos).toHaveBeenLastCalledWith(expect.anything(), { | ||
backgroundColor: 'rgba(10, 20, 30, 0.2)', | ||
darkMode: { | ||
backgroundColor: undefined, | ||
image: undefined, | ||
}, | ||
image: undefined, | ||
imageResizeMode: undefined, | ||
statusBar: { | ||
hidden: undefined, | ||
style: undefined, | ||
}, | ||
}); | ||
expect(configureAndroid).toHaveBeenLastCalledWith(expect.anything(), { | ||
backgroundColor: 'rgba(10, 20, 30, 0.2)', | ||
darkMode: { | ||
backgroundColor: undefined, | ||
image: undefined, | ||
statusBar: { | ||
backgroundColor: undefined, | ||
style: undefined, | ||
}, | ||
}, | ||
image: undefined, | ||
imageResizeMode: undefined, | ||
statusBar: { | ||
hidden: undefined, | ||
style: undefined, | ||
}, | ||
}); | ||
}); | ||
|
||
it('all available parameters', async () => { | ||
/* eslint-disable prettier/prettier */ | ||
await createCommand().parseAsync( | ||
[ | ||
'--background-color', | ||
'rgba(10, 20, 30, 0.2)', | ||
'--image-path', | ||
'./assets/background.png', | ||
'--image-resize-mode', | ||
'contain', | ||
'--dark-mode-background-color', | ||
'yellow', | ||
'--dark-mode-image-path', | ||
'./assets/background-dark.png', | ||
'--status-bar-style', | ||
'dark-content', | ||
'--status-bar-hidden', | ||
'--status-bar-translucent', | ||
'--status-bar-background-color', | ||
'#FFEECCDD', | ||
'--dark-mode-status-bar-background-color', | ||
'red', | ||
'--dark-mode-status-bar-style', | ||
'light-content', | ||
], | ||
{ | ||
from: 'user', | ||
} | ||
); | ||
/* eslint-enable */ | ||
expect(configureIos).toHaveBeenLastCalledWith(expect.anything(), { | ||
backgroundColor: 'rgba(10, 20, 30, 0.2)', | ||
image: './assets/background.png', | ||
imageResizeMode: 'contain', | ||
darkMode: { | ||
backgroundColor: 'yellow', | ||
image: './assets/background-dark.png', | ||
}, | ||
statusBar: { | ||
hidden: true, | ||
style: 'dark-content', | ||
}, | ||
}); | ||
expect(configureAndroid).toHaveBeenLastCalledWith(expect.anything(), { | ||
backgroundColor: 'rgba(10, 20, 30, 0.2)', | ||
image: './assets/background.png', | ||
imageResizeMode: 'contain', | ||
darkMode: { | ||
backgroundColor: 'yellow', | ||
image: './assets/background-dark.png', | ||
statusBar: { | ||
backgroundColor: 'red', | ||
style: 'light-content', | ||
}, | ||
}, | ||
statusBar: { | ||
backgroundColor: '#FFEECCDD', | ||
hidden: true, | ||
style: 'dark-content', | ||
translucent: true, | ||
}, | ||
}); | ||
}); | ||
}); | ||
|
||
describe('rejecting scenarios', () => { | ||
it('reject upon wrong platform', async () => { | ||
await expect(async () => { | ||
await createCommand().parseAsync(['--platform', 'what?'], { from: 'user' }); | ||
}).rejects.toThrowError( | ||
new Error( | ||
`'platform': Invalid value 'what?'. Available values are "android" | "ios" | "all".` | ||
) | ||
); | ||
}); | ||
|
||
it('reject upon missing backgroundColor', async () => { | ||
await expect(async () => { | ||
await createCommand().parseAsync(['--platform', 'all'], { from: 'user' }); | ||
}).rejects.toThrowError( | ||
new Error( | ||
`'backgroundColor': Required option is not provided. Provide a valid color string.` | ||
) | ||
); | ||
}); | ||
}); | ||
}); |
Oops, something went wrong.