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
[configure-splash-screen] Refactor and integrate with @expo/config
#2297
Merged
brentvatne
merged 18 commits into
master
from
@bbarthec/configure-splash-screen-integrate-with-config
Sep 18, 2020
Merged
Changes from all commits
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
86fddc0
[configure-splash-screen] feat: move utils from ./helpers to ./utils
bbarthec 0172fa0
[configure-splash-screen] fix: make one pbxproj propoerty opional
bbarthec 7ba4a37
[configure-splash-screen] feat: clean-up js constants
bbarthec 987a354
[configure-splash-screen] feat: create types.ts with SplashScreenConf…
bbarthec 75f35f1
[configure-splash-screen] feat: create Validator for ConfigJson
bbarthec ba09414
[configure-splash-screen] feat: create external API
bbarthec aa090b5
[configure-splash-screen] feat: update CLI command and package.json w…
bbarthec bd8474e
[configure-splash-screen] feat: update and write missing tests
bbarthec 3e15875
[config] feat: add configure-splash-screen and remove warning
bbarthec 4ba291f
[config] fix: rebase with master
bbarthec 755420d
[configure-splash-screen] Simplify config validator & adjust PR sugge…
bbarthec 8481c9c
[configure-splash-screen] Rename imagePath into image in internally &…
bbarthec cc77d1c
[configure-splash-screen] Remove TODO comment, because it's already done
bbarthec 560d054
Merge branch 'master' into @bbarthec/configure-splash-screen-integrat…
EvanBacon 8abf170
Merge branch 'master' into @bbarthec/configure-splash-screen-integrat…
EvanBacon d8f539a
Merge branch 'master' into @bbarthec/configure-splash-screen-integrat…
EvanBacon 2b63608
[splash-screen] Fix config not being applied
bbarthec c94dcb5
Merge branch 'master' into @bbarthec/configure-splash-screen-integrat…
brentvatne File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should rename all of these tests to
-test
after this PR is merged. #2591